如何强制VUE检测使用foreach循环在异步方法中完成的阵列变化？

Question

我在模板上使用V-For循环，但是即使V-For循环供应所有具有相同数据对象的项目USerCollections，但只有我从获得其长度和项目更新的函数中称为该功能。我正在渲染每个项目上的一个按钮以调用该功能。总而言之，下面的行更新数组，但只有V-For循环中调用该功能的一个项目。它们都以相同的全局数组启动，但是当我在该数组中添加更多项目（从每个项目中）时，就像每个项目都有他们自己的usercollections数组，即使我正在更新“全局” vue数据对象：userCollections ...

 this.userCollections.push({id: doc.id, ...doc.data()})

我的模板：

 <div v-for="(col, index) in userCollections" :id="col.id" :ref="col.id" class="collRow" @click="addToCollection($event, col.id)">             
    <p >{{col.name}} </p>
               
    <p v-if="col.shortDescription">{{col.shortDescription}}</p>
    <button @click=refreshUserColl(userAddress)>refresh</button>
</div>  

如Vue的文档中所述，Vue无法检测到数组的某些更改： https://v2.vuejs.org/gguide/guide/reaectivitive.htmit.html?redirect=true#For-Arrays < /a> 我假设这是我问题的根源，因此我正在尝试使用链接上建议的解决方法。我正在使用foreach循环，并且正在努力获取正确的语法。 我的代码：

async refreshUserColl(userAddress) {
    let vm = this
    let collsRefs = collection(db, "users", userAddress, 'Collections'); // getting data from Google Firestore
    const qSnap = await getDocs(collsRefs);
    this.userCollections = []
    qSnap.docs.forEach((doc) =>{
        console.log(this)
        
        this.set(vm.userCollections.push({id: doc.id, ...doc.data()})) <--- problem
    })
    
}

请注意this.set（vm.usercollections ...），基本上是我直言不讳地试图翻译Vue的文档上的说明vue.set（vm.items，vm.items，indexofitem，newValue，newValue） ）

我遇到了这个错误

任何帮助将不胜感激。