Question

我为vue组件提供了一系列元素作为反应数据源（我正在使用vue chrome扩展程序检查数据）：

the view: [A,B,C,D,E]
the data: [A,B,C,D,E]

我想将一个项目（D）移动到一个新位置（在B之前），所以首先我用splice删除该元素，然后将其重新插入所需的索引：

the view: [A,D,B,C,E]   
the data: [A,B,C,D,E]

因此，当我将鼠标悬停在Chrome Vue检查器中的第二个组件上时，在视图中第三列会突出显示。如果我将鼠标悬停在数据中的第3个元素上，则在视图中第4个元素会突出显示，依此类推。

视图正确更新，但我希望数据基础跟随它。在数组中，元素是对象。

我想这是因为它们是作为参考传递的？

Answer 1

我想我找到了它，而不是拼接我应该在vue实例上使用set和remove： https://vuejs.org/v2/api/#Vue-set

您应该避免直接设置数据绑定数组的元素索引，因为Vue.js不会接收这些更改。相反，使用augmented $ set（）方法

Answer 2

我也遇到了同样的问题，发生的事情是我没有为数组中的每个vue对象使用唯一的key值。我使用数组中的索引作为键。因此，在重新排序项目时，由于交换了密钥，因此某些数据将绑定到不同的项目。

我使用的是Date.now()函数来初始化要为每个密钥设置的UUID

例如，假设我们将键设置为数组的索引

[ 0, 1, 2, 3, 4] - The keys
[A0,B0,C0,D0,E0] - The array of objects
[A1,B1,C1,D1,E1] - The data attribute inside each of the objects in array

因此，[A0]的键为[0]，数据属性为[A1]。假设我们交换了[A0]和[B0]

[ 0, 1, 2, 3, 4] - the key
[B0,A0,C0,D0,E0] - the array of objects
[A1,B1,C1,D1,E1] - the data attribute assigned to each object in array

现在[A0]已绑定到[B1]的数据属性，因为 [B1]绑定到[1]的键，而A [0]的键是[1]

这永远不是您想要的，因此您想使每个键都唯一。常用的方法是在数据初始化时使用Date.now()方法，或创建UUID

摘要

Vue中的示例，用于在使用vue方法时为每个对象创建唯一的UUID

    methods: {
      _addGroup: function() {
        let result = {
          sortId: this.wizardGroups.length + 1,
          text: 'Hello world'
          uuid: Date.now(),
        };
        this.wizardGroups.push(result);
      }

在v-for迭代期间将该值分配给键

<child-component
  v-for="wizardGroup in wizardGroups"
  :key="wizardGroup.uuid">
</child-component>

Vuejs 2在数组中移动项目，不保留数组索引

2 个答案:

摘要