Фильтрация элементов в vue js?

Question

[Константин Тимошено]

Есть переменные, которые фильтруют данные:

produnit: 0,
labaratory: 0,
scales: 0,
show: 0,

Делаю фильтрацию элементов. Необходимо поменять значение на 0 или 1. Аналог toggle. Есть вариант с проверками, но он громоздкий и не хотелось бы плодить кучу обработчиков. Есть ли элегантный вариант обрабатывать все 4 переменные в одном событии?

Comments

[Aetae]

Во-первых: почему вместо boolean вы используете number?
Во-вторых: не особо понятно чего вы хотите, но стандартная схема фильтрации массива в vue - computed свойство, которые возвращает отфильтрованный массив(по любому количеству признаков).
В третьих: никаких событий там где не надо, а где надо в простых случаях - лучше скрыть за компонентом с v-model.

[Alex]

Согласен с Aetae, не очень то понятно что вы хотите и в чем проблема

[Константин Тимошено]

Фильтрация у меня уже настроена и она фильтрует как положено.

filteredSuppliers(){
              return this.suppliers
                .filter(supplay => {
                  return this.produnit === 0 || supplay.prod_unit === this.produnit;
                })

и т.д.

Хочу сделать так, чтобы при нажатии на кнопку фильтра, менял значение produnit на 1 (получаю такое с базы) и обратно.

[Aetae]

Константин Тимошено, и в чём проблема?

<button @click="produnit ^= 1"> produnit: {{produnit ? 'on' : 'off'}} </button>

Ну или отдельным обрабочиком:

<button @click="toggle('produnit')"> produnit: {{produnit ? 'on' : 'off'}} </button>

toggle(filter){
    this[filter] ^= 1;
}

Ну и эту buttonхорошо бы скрыть за отдельным мини-компонентом.

[Константин Тимошено]

Aetae, согласен, благодарю. Понял логику. Напиши ответом, я отмечу.

Answer 1

[gl00m]

Можно вернуть массив с этими переменными из компьютед, и сделать вотчер на этот компьютер. Вотчер будет срабатывать при изменении одной из них, а на входе будет иметь массив с ними