Vue：如何在 v-for 中执行反应式对象变化检测？

Question

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

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

<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.deleteVue.set 之前尝试过，但实际上并没有删除。

有没有办法不替换键/值对，而是将更多/更改参数添加到 ID 为 newID

谢谢！

Answer 1

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

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

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