我的部件有点古怪。我有一个按钮列表,当单击时,每个按钮都应该通过从数组中删除从dom中删除。在本例中,我使用函数removeItem并将项的索引传递给它。这很好,并且它正在从数组中移除,但意外的是,同一项正在从另一个数组中移除。

<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;
      }
    });
}
}

最佳答案

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

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

对象的赋值是通过引用完成的。在这种情况下,abcxxzz都引用同一个底层数组。当您在一个中修改它时,您在另一个中修改它。你可能想make a copy

10-05 20:36
查看更多