:Disabled кнопку поиска, если хоть одно поле не валидно?

Question

[Yan]

Привет!
Моя задача скрыть кнопку поиска, если есть хоть одно поле, которое имеет тип, отличный от: Number
Вот что я сделал в 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>

Это работает, но только для для одного селекта, если я делаю второй селект не валидным, то кнопка не исчезает.

Comments

[Александр]

Просто покажу более удобный способ писать тоже самое

filterValid () {
  let items = [this.tkType, this.archiveTk, this.fundTk, this.tkStatusSend, this.tkTypeMessage];
  return items.any( i => i !== null && i.value === 'number');
}

[WapSter]

Ну так ты условие или используешь, которое при одном из true вернёт true

Answer 1

[Никита]

Используйте v-if/v-show
https://ru.vuejs.org/v2/guide/conditional.html

UPD: для нужного изменения состояния :disabled надо поменять условие. Вам правильно указали в комментариях - в коде используется проверка ИЛИ вместо И. А вам нужно И.

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

Comments

[WapSter]

А при чем тут v-if

[Никита]

WapSter, в вопросе указано "скрыть кнопку поиска"

[Yan]

Я не верно написал, извиняюсь. Нужно именно ее disable, если не валидно