Vue.js Vue不断更新其他数据阵列

我的组件有一些奇怪的行为。我有一个按钮列表，当单击时，每个按钮都应该通过从数组中删除来从DOM中删除。在本例中，我使用函数

removietem

，并将项目的索引传递给它。这很好，它正在从数组中删除

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

{{item.name}
({
abc:[]，
xxzz:[]，
}),
方法：{
删除项目（索引）{
这是abc拼接（索引1）；
},
},
创建（）{
var vm=这个；
设formData=new formData（）；
axios({
url:“/get/items”，
方法：“post”，
数据：formData
})
.然后（功能（响应）{
如果（response.status==200）{
vm.abc=response.data.items；
vm.xxzz=response.data.items；
}
});
}
}

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

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

---

对象的赋值是通过引用完成的。在本例中，

abc

和

xxzz

都引用相同的底层数组。在其中一个中修改它时，在另一个中修改它。你可能想。

你是说

xxzz

，还是在其他地方定义了

xxyy

项？我想知道

abc

和

xxzz

是否实际上是同一个对象，因为你是从同一来源制作它们的。你能试着用

Object.assign（{}，response.data.items）

来构建

xxzz

吗？