Vue中array.filter失效：点击菜品无法移除并恢复样式问题

问题根源 #

1. 移除菜品逻辑失效：filter()方法仅返回新数组，不会修改原数组this.dishes，导致点击移除操作后数组无变化，背景色无法切换回粉色。
2. v-for的key绑定错误：循环项dish是字符串，不存在id属性，v-bind:key="dish.id"会绑定undefined，可能引发Vue列表渲染的异常问题。

修复后的代码 #

App.vue

<template>
  <div>
    <h2>Dishes:</h2>
    <ul>
      <li v-for="dish in this.$globalData.dishes" :key="dish"
          :style="dishes.includes(dish) ? {'background-color': 'lightgreen'} : {'background-color': 'pink'}"
          @click="toggleDish(dish)">
        {{ dish }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dishes: []
    }
  },
  methods: {
    toggleDish(dish){
      if (this.dishes.includes(dish)){
        // 用filter生成新数组并替换原数组，触发响应式更新
        this.dishes = this.dishes.filter(d => d !== dish);
        // 也可以用splice删除对应元素（适合后续扩展复杂数据场景）
        // const index = this.dishes.indexOf(dish);
        // if (index !== -1) this.dishes.splice(index, 1);
      } else {
        this.dishes.push(dish);
      }
    },
  }
}
</script>

main.js（无需修改）

...
Vue.prototype.$globalData = Vue.observable({
  dishes: ['Salad', 'Burger', 'Cake'],
});
...

补充说明 #

• 方法名改为toggleDish更贴合“添加/移除”的双向操作语义，也可保留原名称addDish。
• 替换原数组或使用splice修改原数组，都能触发Vue的响应式更新，实现背景色的切换。
• 将key绑定为dish本身，利用字符串的唯一性满足Vue对列表key的要求。

内容的提问来源于stack exchange，提问作者Sam