我知道，将新的键添加到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>
从Cloud 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的解决方案。
您必须使用Vue.set或this.$set：
if (doc.exists) {
this.$set(this.products, doc.id, {
data: doc
});
}
从文档：
Vue不允许将新的根级别反应性属性动态添加到已创建的实例中。但是，可以使用Vue.set（object，propertyName，value）方法将反应性属性添加到嵌套对象中
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句