vue.js - Vue : How to perform reactive object change detection in v-for?

Question

我阅读了 this 文档，但无法使用建议的解决方案。

我在对象上有一个 v-for 循环。这些对象随着时间的推移而动态变化，我需要这些变化在 v-for 循环中 react 性地显示。

<b-row lg="12" v-for="data in objects" :key="data.id">
    <div v-if="data.loading">
      loading...
      {{data.loading}}
    </div>
    <div v-else>
      loaded, done
      {{data.loading}}
    </div>
</b-row>

在我的方法中，我有一个 for 循环，它为每个对象下载数据并像这样更改对象值:

for(var i = 0; i<response.ids.length; i++){
    var newId = response.ids[i].id
    this.objects.newId = {"loading":true, "id": newId}

    downloadSomething(newId).then(res => {
        this.objects.newId = res[0]         //<-- this change needs to be shown reactively.
    })
}

根据 Vue 文档，对象更改不是响应式的:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

Vue 提出了一些解决方法，如下所示:

Vue.set(vm.userProfile, 'age', 27)

更新

但就我而言，这只会在具有相同 ID 的对象中创建一个新参数，并创建重复键警告和其他问题。

我也在 Vue.set 之前尝试过 Vue.delete 但它实际上并没有删除。

有没有办法不替换键/值对，而是将更多/更改参数添加到具有 newID ID 的根的第一个子节点

谢谢!

Answer 1

解决方案: 用 this.objects.newId = res[0] 替换 this.$set(this.objects, 'newId', res[0])，它应该可以工作。

解释: this.$set 只是 Vue.set 的别名，可在任何 Vue 实例中使用。请记住，示例中的 vm(代表 View 模型)与 this 相同，等于 Vue 组件实例。同样由于 ES5 JS 的限制，您必须通过 Vue.set/this.$set 显式设置对象的属性以手动触发重新渲染。这个问题会在 Vue 3.0 发布时得到解决。

希望这会有所帮助，如果您需要任何说明 - 请随时询问。