Vue Toggle Filters

Question

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

У меня есть массив цветов, массив объектов, называемых продуктами, и свойство, называемое 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
             }
        ]
    }
}

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

<button
    class="color-picker"
    v-for="color in colors"
    @click="filterColors(color)">
    {{ color }}
</button>

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

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 иoff.

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

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

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

Answer 1

На самом деле вам не нужно добавлять какой-либо класс.

Посмотрите на этот пример, который я сделал для вас. Здесь это

Answer 2

Я бы попытался создать вычисляемую функцию, которая динамически фильтрует ваши данные и возвращает их. Вам следует добавить новый пустой массив, где вы храните выбранные цвета, и применить его к вычисляемому фильтру.

Не могли бы вы предоставить jsfiddle для лучшего исследования?