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

问题描述

我知道向 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"

我更改了索引的键并使用了 Dan 的解决方案。

解决方法

您必须使用 const Child2 = ({username,password}) => {...} 或 Vue.set：

this.$set

来自docs：

Vue 不允许向已创建的实例动态添加新的根级响应式属性。但是，可以使用 Vue.set(object,propertyName,value) 方法向嵌套对象添加响应式属性