单击时更改计算属性

Posted 2023-02-23

【中文标题】单击时更改计算属性

【英文标题】：Change Computed Property on Click

【发布时间】：2020-08-08 13:15:46

【问题描述】：

是否可以通过点击事件在“v-for”中添加/更改计算属性？ 当我点击正确的按钮时，我希望能够根据它们的类别显示食物列表。

如果我点击“水果”按钮，它将是

 <div v-for="food in fruitCategory" :key="food.name" class="card">
      <p> food.name </p>
    </div>

还有“糖果”按钮

 <div v-for="food in candyCategory" :key="food.name" class="card">
      <p> food.name </p>
    </div>

这是一个好方法吗？

下面的实际代码

<template>
  <div class="layout">
    <button>all</button>
    <button>fruit</button>
    <button>candy</button>
    <div v-for="food in foods" :key="food.name" class="card">
      <p> food.name </p>
    </div>
  </div>
</template>

export default 
  name: 'Food',
  data() 
    return 
      foods: [
         name: 'banana', category: 'fruit' ,
         name: 'orange', category: 'fruit' ,
         name: 'strawberry', category: 'fruit' ,
         name: 'gum', category: 'candy' ,
         name: 'fuzzy peach', category: 'candy' ,
      ]
    
  ,
  computed: 
    fruitCategory: function() 
      return this.foods.filter(function(food) 
        return food.category === 'fruit'
      )
    
  ,
  candyCategory: function() 
    return this.foods.filter(function(food) 
      return food.category === 'candy'
    )
  

【问题讨论】：

我倾向于只使用一个带有return food.category === this.category 的计算属性，其中this.category 将是通过单击按钮设置的data 属性。这样的东西符合您的要求吗？

【参考方案1】：

您只需要将类别存储在data 中，然后您就可以动态使用过滤器。

这里是一个使用 cat 数组检查是否包含类别的工作示例。

new Vue(
  el: "#app",
  name: 'Food',
  data() 
    return 
      cat: ['fruit','candy'],
      foods: [
         name: 'banana', category: 'fruit' ,
         name: 'orange', category: 'fruit' ,
         name: 'strawberry', category: 'fruit' ,
         name: 'gum', category: 'candy' ,
         name: 'fuzzy peach', category: 'candy' ,
      ]
    
  ,
  computed: 
    filtered: function() 
      var cat = this.cat;
      return this.foods.filter(function(food) 
        return cat.indexOf(food.category) >= 0;
      )
    
  ,
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>


<div id="app">
  <div class="layout">
    <button @click="cat=['fruit', 'candy']">all</button>
    <button @click="cat=['fruit']">fruit</button>
    <button @click="cat=['candy']">candy</button>
    <div v-for="food in filtered" :key="food.name" class="card">
      <p> food.name </p>
    </div>
  </div>
</div>