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

Posted 2023-02-16

【中文标题】将新键添加到对象时如何重新渲染 v-for

【英文标题】：How to re render v-for when new keys are added to an object

【发布时间】：2021-04-04 16:12:38

【问题描述】：

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

从云火库带来新数据的功能

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 的解决方案。

【参考方案1】：

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

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

来自docs：

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