Question

Vuejs-更新数组中的对象

2019-04-04

173

javascript vue.js

我正在使用 VueJs，我有一个对象数组。我想要做的是根据索引更新数组中的对象。为此，我编写了一个方法：

updateRow(index) {
      this.inputs[index]={ "one": "test", "two": "test" }
    }

但是，对象就是不更新。我为其创建了以下 jsbin。

https://jsbin.com/boturuluxe/1/edit?html,js,console,output

如能提供任何帮助，我们将不胜感激。

Answer 1

由于 JavaScript 的限制，Vue 无法检测到对数组的以下更改：

当您直接使用索引设置项目时，例如 vm.items[indexOfItem] = newValue
当您修改数组的长度时，例如 vm.items.length = newLength

解决方案是： this.$set(this.inputs, index, { "one": "test", "two": "test" })

在此处阅读更多信息

Answer 2

使用此

updateRow(index) {
  Vue.set(this.inputs, index, { "one": "test", "two": "test" })
}

Asim Khan

2019-04-04

Answer 3

您可以执行以下操作：

updateRow(index) {
  this.inputs[index]={ "one": "test", "two": "test" };
  this.inputs = Object.assign({}, this.inputs);
  // assigning a new object reference
}

或者，

updateRow(index) {
  this.$set(this.inputs, index, { "one": "test", "two": "test" });
}

Vue 文档参考