javascript - Vue 切换过滤器

Question

我尝试在 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
             }
        ]
    }
}

每种颜色一个滤镜。

<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 时，我向 div 添加一个 hide-me 类，该类循环遍历产品并显示它们.

通过上面的函数，我可以打开和关闭类hide-me。

当我点击过滤器red时，红色项目可见，并隐藏所有非红色项目。当我第二次单击过滤器red时，它会显示第一次隐藏的所有非红色项目，这正是我想要的。

我的问题是，当我点击过滤器red并隐藏所有非红色的项目时，我希望能够点击过滤器blue并显示所有蓝色的项目使红色项目保持可见，其余颜色依此类推。

如何使用当前代码实现此目的？

Answer 1

您实际上不需要添加任何类。

看一下我为您制作的这个示例。 Here这是