:Disabled the search button if at least one field is not valid?

Question

Vue.js

Hey!
My task is to hide the search button if there is at least one field that has a type other than: Number
Here is what I did in Computed :

filterValid () {
(this.tkType !== null) && (typeof this.tkType.value === 'number') ||
(this.archiveTk !== null) && (typeof this.archiveTk.value === 'number') ||
(this.fundTk !== null) && (typeof this.fundTk.value === 'number') ||
(this.tkStatusSend !== null) && (typeof this.tkStatusSend.value === 'number') ||
(this.tkTypeMessage !== null) && (typeof this.tkTypeMessage.value === 'number')
}

<v-btn
  :disabled="!filterValid"
>
Поиск
</v-btn>

This works, but only for one select, if I make the second select not valid, the button does not disappear.

Answer 1

Use v-if/ v-show
https://ru.vuejs.org/v2/guide/conditional.html
UPD: to change the :disabled state you need to change the condition. You were correctly pointed out in the comments - the code uses the OR check instead of AND. And you need AND.

filterValid () {
   firstSelectValid &&
   secondSelectValid &&
   // и так далее
}