提问人:Sam 提问时间:11/16/2023 更新时间:11/16/2023 访问量:29
Javascript + Vue 错误:array.filter 未按预期工作
Javascript + Vue error: array.filter not working as expected
问:
我有两个数组:
$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'],
});
...
答:
1赞
Chris G
11/16/2023
#1
看起来问题出在组件中的方法上。addDish
App.vue
该方法不会修改原始数组,而是创建一个新数组。因此,当您尝试使用 method 删除盘子时,它会创建一个新数组,但您不会将其分配回 this.dishes。Array.filter
this.dishes.filter()
您需要更新方法以正确地从阵列中删除培养皿。addDish
methods: {
addDish(dish){
if (this.dishes.includes(dish)){
this.dishes = this.dishes.filter((d) => d !== dish);
} else {
this.dishes.push(dish);
}
},
}
评论