javascript — Vue Toggle Filters

Vue Toggle Filters

Я в колее с некоторыми фильтрами, которые я пытаюсь сделать в Vue.

У меня есть массив цветов, массив объектов с именем products и свойство count для подсчета кликов:

 data() { return { count: 0, colors: [ 'red', 'blue', 'yellow', 'green' ], product:[ { id: 1, name: 'Dress shoes', price: 5, color:'red', compare: null }, { id: 2, name: 'Sports shoes', price: 3, color:'blue', compare: null }, { id: 3, name: 'Beach shoes', price: 2, color:'yellow', compare: null }, { id: 4, name: 'Slippers', price: 1, color:'green', compare: null } ] } } 

И один фильтр на цвет.

 {amp}lt;button class="color-picker" v-for="color in colors" @click="filterColors(color)"{amp}gt; {{ color }} {amp}lt;/button{amp}gt; 

Функция, которую я пытаюсь написать, которая фильтрует цвета:

 filterColors(color) { const filter = event.target || event.srcElement; if (product.color !== color) { if (this.count % 2 === 1) { filter.classList.add("selected"); product.compare = false; } if (this.count % 2 === 0) { filter.classList.remove("selected"); product.compare = true; } } } 

Поэтому, когда compare равно false , я добавляю класс hide-me в div, который просматривает продукты и отображает их.

С помощью функции выше я могу включать и выключать класс hide-me .

Когда я нажимаю на фильтр red красные элементы остаются видимыми, а все красные элементы скрываются. Когда я нажимаю второй раз на red фильтр, он показывает все не красные элементы, которые были спрятаны в первую очередь, что я и хочу.

Моя проблема в том, что когда я нажимаю на red фильтр и скрываю все элементы, которые не являются красными, я хочу иметь возможность нажать на blue фильтр и показать все синие элементы, оставляя красные элементы видимыми, и так далее для остальных цвета.

Как я могу добиться этого с моим текущим кодом?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector