Question

我的组件有一些奇怪的行为。我有一个按钮列表，当点击时，每个按钮都应该从DOM中删除它。在这种情况下，我使用函数removeItem并传递项目的索引。这工作正常，它正从数组abc[]中删除，但出乎意料的是，同一项目正在从另一个数组xxzz[]中删除

<template>
    <button v-for="(item, index) in abc" @click="removeItem(index)">{{ item.name }}</button>
</template

export default {
data: () => ({
  abc: [],
  xxzz: [],
}),
methods: {
  removeItem(index){
    this.abc.splice(index, 1);
  },
},
created(){
  var vm = this;
  let formData = new FormData();
  axios({
      url: '/get/items', 
      method: 'post',
      data: formData
    })
    .then(function (response) {
      if(response.status == 200){
        vm.abc = response.data.items;
        vm.xxzz = response.data.items;
      }
    });
}
}

Answer 1

您正在将两个项目设置为同一个数组：

    vm.abc = response.data.items;
    vm.xxzz = response.data.items;

通过引用完成对象的分配。在这种情况下，abc和xxzz都引用相同的底层数组。当您在一个中修改它时，您可以在另一个中修改它。您可能想要make a copy。

Vue不断更新其他数据阵列

1 个答案: