Vuejs 和 Vue.set()，更新数组

编辑 2

对于需要反应性的所有对象更改，请使用 Vue.set(object, prop, value)

对于数组突变，您可以在此处查看当前支持的列表

编辑 1

对于 vuex，您需要执行 Vue.set(state.object, key, value)

原来的

因此，仅针对提出此问题的其他人。它出现在 Vue 2 的某个时刻。* 他们删除了 this.items.$set(index, val) 以支持 this.$set(this.items, index, val)。

Splice 仍然可用，这里是 vue link 中可用的数组变异方法的链接。

---

如果您像这样操作数组，VueJS 无法获取您对状态的更改。

如 Common Beginner Gotchas 中所述，您应该使用 push、splice 等数组方法，并且永远不要修改像 a[2] = 2 这样的索引或数组的 .length 属性。

new Vue({ el: '#app', data: { f: 'DD-MM-YYYY', items: [ "10-03-2017", "12-03-2017" ] }, methods: { cha: function(index, item, what, count) { console.log(item + " index > " + index); val = moment(this.items[index], this.f).add(count, what).format( this.f); this.items.$set(index, val) console.log("arr length: " + this.items.length); } } }) ul { list-style-type: none; }

---

如前所述 - VueJS 根本无法跟踪这些操作（数组元素分配）。 VueJS 使用数组跟踪的所有操作都是 here。但我会再次复制它们：

推（）

流行音乐（）

转移（）

取消移位（）

拼接（）

种类（）

撤销（）

在开发过程中，您面临一个问题 - 如何忍受它:)。

push()、pop()、shift()、unshift()、sort() 和 reverse() 非常简单，在某些情况下可以帮助您，但主要关注点在于 splice()，它允许您有效地修改数组这将由 VueJs 跟踪。所以我可以分享一些最常用于数组的方法。

您需要替换数组中的项目：

// note - findIndex might be replaced with some(), filter(), forEach() 
// or any other function/approach if you need 
// additional browser support, or you might use a polyfill
const index = this.values.findIndex(item => {
          return (replacementItem.id === item.id)
        })
this.values.splice(index, 1, replacementItem)

注意：如果您只需要修改项目字段 - 您可以通过以下方式进行：

this.values[index].itemField = newItemFieldValue

这将由 VueJS 跟踪，因为 item(Object) 字段将被跟踪。

您需要清空数组：

this.values.splice(0, this.values.length)

实际上，您可以使用此功能做更多 splice() - w3schools link您可以添加多条记录，删除多条记录等。

Vue.set() 和 Vue.delete()

Vue.set() 和 Vue.delete() 可用于将字段添加到您的 UI 版本的数据。例如，您需要在对象中添加一些额外的计算数据或标志。您可以为您的对象或对象列表（在循环中）执行此操作：

 Vue.set(plan, 'editEnabled', true) //(or this.$set)

并在 Axios 调用之前以相同的格式将编辑后的数据发送回后端：

 Vue.delete(plan, 'editEnabled') //(or this.$delete)

---

一种替代方法 - 并且更轻量级的方法来解决您的问题 - 可能只是暂时编辑数组，然后将整个数组分配回您的变量。因为 Vue 不监视单个项目，它会监视整个变量的更新。

所以你这也应该工作：

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

这也应该更新你的 DOM。

---

在此处观察对象和数组的反应性：

https://v2.vuejs.org/v2/guide/reactivity.html

---