我有两个数组：

• $globalData.dishes在main.js中定义为['Salad', 'Burger', 'Cake']。
• dishes在App.vue中定义为空数组。

我写的代码应该列出$globalData.dishes中的所有菜，最初是粉红色的。当点击一个菜时，它被添加到dishes，它的颜色变成绿色（这可以工作）。当再次点击它时，它从dishes中删除，它的颜色恢复到粉红色**（这不工作）**。
App.vue:

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

<script>
export default {
  data () {
    return {
      dishes: []
    }
  },
  methods: {
    addDish(dish){
      if (this.dishes.includes(dish)){
        this.dishes.filter((d) => d !== dish)
      } else {
        this.dishes.push(dish);
      }
    },
  }
}
</script>

字符串
main.js:

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

型