Question

我需要更新我的VueJS组件中的一些Array数据，该组件通过v-for呈现为模板中的列表。

当我更新整个数组时，我看到DOM中的列表更新。但是，如果我只更新索引，则列表不会更新。

以下是两个相关方法：

methods: {
  loadOnlyOneIndex: function() {
    this.data[0] = {
      title: 'Hello error',
      slug: 'hello',
      desc: 'will not work'
    };
  },
  loadEverything: function() {
    this.data = [{
      title: 'Hello new title',
      slug: 'hello',
      desc: 'this will work'
    }, {
      title: 'Hello new title 2 !',
      slug: 'hello2',
      desc: 'really work'
    }];
  }
}

Here is a fiddle.

Answer 1

来自documentation：

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



直接设置带索引的项目时，例如vm.items[indexOfItem] = newValue



修改数组的长度时，例如vm.items.length = newLength

要让Vue对数组索引的更改作出反应，请使用Vue.set() method。

在您的情况下，您应该在Vue.set(this.data, 0, newValue)方法中使用loadOnlyOneIndex。

Here's a working fiddle.

每个Vue实例还通过Vue.set具有vm.$set方法的别名（其中vm是Vue实例）。

因此，您还可以在this.$set(this.data, 0, newValue)方法中使用loadOnlyOneIndex。

这在使用Single File Components或您没有直接引用Vue对象的任何地方时很有用。

组件的Array索引数据未更新

1 个答案: