Vue 不断更新其他数据数组答案

【问题标题】：Vue keeps updating other data arraysVue 不断更新其他数据数组
【发布时间】：2018-06-21 08:04:07
【问题描述】：

我的组件有一些奇怪的行为。我有一个按钮列表，当单击每个按钮时，应该通过从数组中删除它来从 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;
      }
    });
}
}

【问题讨论】：

您的意思是xxzz，还是在其他地方定义了xxyy 项？
我想知道abc 和xxzz 是否实际上是同一个对象，因为您是从同一个来源制作它们的。您可以尝试使用Object.assign( {} , response.data.items ) 构建xxzz 看看是否有帮助？

标签： vue.js vuejs2 vue-component

【解决方案1】：

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

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

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

【讨论】：