将新键添加到对象时如何重新渲染 v-for

Question

我知道向 v-for 中使用的对象添加新键时不会触发 v-for 中的更改，但我必须这样做。有什么办法可以做到吗？

我的代码：

<v-col
   v-for="(product, key) in products"
   :key="key"
   cols="12"
   lg="4"
>
   <ProductsCard
      v-on:showDeleteDialog="showDeleteDialog($event)"
      :callback="updateSwitch"
      :product="product"
      :shareIcon="shareIcon"
      :menuIcon="menuIcon"
      :callBackMethods="callBackMethods"
   ></ProductsCard>
</v-col>

从云 firestore 中获取新数据的函数

async loadMoreProducts() {
   let lastVisible = this.initialProductsPromise.docs[
      this.initialProductsPromise.docs.length - 1
   ];
   let nextPromise = await getRemainingProducts(this.catId, lastVisible);
   if (!nextPromise.empty) {
      nextPromise.forEach(doc => {
         if (doc.exists) {
            this.products[doc.id] = {
              data: doc
            };
         }
      });
      this.initialProductsPromise = nextPromise;
   }
},

更新：

v-for="(product, key, index) in products"
   :key="index"
   cols="12"
   lg="4"

我把key改成了索引，用了Dan的方案。

Answer 1

您必须使用 Vue.set 或 this.$set:

if (doc.exists) {
   this.$set(this.products, doc.id, {
      data: doc
   });
}

来自docs：

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, propertyName, value) method

将新键添加到对象时如何重新渲染 v-for

How to re render v-for when new keys are added to an object

javascript

vue.js

vue-component

vuejs2

v-for

更新：