使用vue js使用多个过滤器过滤项目

Question

我正在学习Vue JS，并尝试使用多个过滤器来过滤多个产品。

因此，我有一个6个过滤器的例子，从product 1到product 6。我也有6个不同类别的产品。我已经编写了如下代码，但当我尝试单击按钮过滤器来过滤产品时，它不起作用。我已经尝试了各种方法，但仍然不起作用。

有人能帮我解释一下并解决这个问题吗？

​

new Vue({
  el: '#app',

  data () {
    return {
      categories:[
        {
          category_title: 'Product 1',
          category_name: "product-1"
        },
        {
          category_title: 'Product 2',
          category_name: "product-2"
        },
        {
          category_title: 'Product 3',
          category_name: "product-3"
        },
        {
          category_title: 'Product 4',
          category_name: "product-4"
        },
        {
          category_title: 'Product 5',
          category_name: "product-5"
        },
        {
          category_title: 'Product 6',
          category_name: "product-6"
        },
      ],
      productItems: [
        {
          name: 'Pro1',
          category: 'product-1'
        },
        {
          name: 'Pro2',
          category: 'product-2'
        },
        {
          name: 'Pro3',
          category: 'product-3'
        },
        {
          name: 'Pro4',
          category: 'product-4'
        },
        {
          name: 'Pro5',
          category: 'product-5'
        },
        {
          name: 'Pro6',
          category: 'product-6'
        },
      ],
    }
  },
  computed: {
    productFilter(){
      return this.productItems;
    },
    filterProduct(){
      return this.productItems.filter((product) => product.category == this.categories.category_name)
    }
  }
})

.product-items span{
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app">
  <div class="product-filter">
    <button @click="filterProduct" v-for="cat in categories" :key="cat.id">
      {{ cat.category_title }}
    </button>
  </div>
  
  <div class="product-items">
    <span v-for="product in productFilter" :key="product.id">{{ product.name }}</span>
  </div>
</div>

​

Answer 1

将filterProduct从计算属性移动到methods。通常，操作放在methods中，computed属性保存的数据相对于在该特定计算属性的定义中使用的依赖值而变化。

在这里，我创建了一个名为activeCategory的数据属性，它是在用户单击任何一个类别按钮时设置的。productFilter计算属性使用activeCategory数据属性。因此，每当从函数filterProduct更新数据属性activeCategory时，productFilter computed属性都会自动返回一组新的产品。

​

new Vue({
  el: '#app',

  data() {
    return {
      categories: [
        {
          category_title: 'Product 1',
          category_name: "product-1"
        },
        {
          category_title: 'Product 2',
          category_name: "product-2"
        },
        {
          category_title: 'Product 3',
          category_name: "product-3"
        },
        {
          category_title: 'Product 4',
          category_name: "product-4"
        },
        {
          category_title: 'Product 5',
          category_name: "product-5"
        },
        {
          category_title: 'Product 6',
          category_name: "product-6"
        },
      ],
      productItems: [
        {
          name: 'Pro1',
          category: 'product-1'
        },
        {
          name: 'Pro2',
          category: 'product-2'
        },
        {
          name: 'Pro3',
          category: 'product-3'
        },
        {
          name: 'Pro4',
          category: 'product-4'
        },
        {
          name: 'Pro5',
          category: 'product-5'
        },
        {
          name: 'Pro6',
          category: 'product-6'
        },
      ],
      activeCategory: null,
    }
  },
  methods: {
    filterProduct(category) {
      this.activeCategory = category;
    }
  },
  computed: {
    productFilter() {
      return this.activeCategory ?
        this.productItems.filter((product) => product.category == this.activeCategory.category_name) :
        this.productItems;
    },
  }
})

.product-items span {
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
  integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="app">
  <div class="product-filter">
    <button @click="filterProduct(cat)" v-for="cat in categories" :key="cat.id">
      {{ cat.category_title }}
    </button>
  </div>

  <div class="product-items">
    <span v-for="product in productFilter" :key="product.id">{{ product.name }}</span>
  </div>
</div>

​

Answer 2

方法filterProduct应该在methods选项中定义，并添加filtered属性，当您单击按钮时，该属性将获取过滤后的产品，此单击按钮运行将当前类别作为参数的方法：

​

new Vue({
  el: '#app',

  data() {
    return {
      categories: [{
          category_title: 'Product 1',
          category_name: "product-1"
        },
        {
          category_title: 'Product 2',
          category_name: "product-2"
        },
        {
          category_title: 'Product 3',
          category_name: "product-3"
        },
        {
          category_title: 'Product 4',
          category_name: "product-4"
        },
        {
          category_title: 'Product 5',
          category_name: "product-5"
        },
        {
          category_title: 'Product 6',
          category_name: "product-6"
        },
      ],
      productItems: [{
          name: 'Pro1',
          category: 'product-1'
        },
        {
          name: 'Pro2',
          category: 'product-2'
        },
        {
          name: 'Pro3',
          category: 'product-3'
        },
        {
          name: 'Pro4',
          category: 'product-4'
        },
        {
          name: 'Pro5',
          category: 'product-5'
        },
        {
          name: 'Pro6',
          category: 'product-6'
        },
      ],
      filtered: []
    }
  },
  computed: {
    productFilter() {
      return this.productItems;
    },

  },
  methods: {
    filterProduct(cat) {
      this.filtered = this.productItems.filter((product) => product.category == cat.category_name)
    }
  }
})

.product-items span {
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="app">
  <div class="product-filter">
    <button @click="filterProduct(cat)" v-for="cat in categories" :key="cat.id">
      {{ cat.category_title }}
    </button>
  </div>

  <div class="product-items">
    <span v-for="product in filtered" :key="product.id">{{ product.name }}</span>
  </div>
  <pre>

<pre>
{{filtered}}
</pre>
</div>

​