Javascript + Vue 错误:array.filter 未按预期工作

Javascript + Vue error: array.filter not working as expected

提问人:Sam 提问时间:11/16/2023 更新时间:11/16/2023 访问量:29

问:

我有两个数组:

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

我编写的代码应该以粉红色列出所有菜肴。当一个盘子被点击时,它被添加到它,它的颜色变为绿色(这有效)。当再次单击时,它将被删除,其颜色恢复为粉红色(这不起作用)。$globalData.dishesdishesdishes


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'],
});
...
javascript vue.js vuejs2

评论

2赞 Chris G 11/16/2023
您需要更新 addDish 方法以正确地从数组中删除 Dish。Filter 方法不会修改原始数组,它会为您创建一个新数组,但您不会将该新值分配给 this.dishes
0赞 Sam 11/16/2023
@ChrisG就是这样!随意添加它作为答案(:

答:

1赞 Chris G 11/16/2023 #1

看起来问题出在组件中的方法上。addDishApp.vue

该方法不会修改原始数组,而是创建一个新数组。因此,当您尝试使用 method 删除盘子时,它会创建一个新数组,但您不会将其分配回 this.dishes。Array.filterthis.dishes.filter()

您需要更新方法以正确地从阵列中删除培养皿。addDish

methods: {
    addDish(dish){
      if (this.dishes.includes(dish)){
        this.dishes = this.dishes.filter((d) => d !== dish);
      } else {
        this.dishes.push(dish);
      }
    },
  }