可以修改子组件绑定的key,这样子组件就会重新渲染
<view class="outerContainer" v-for="brandItem,brandIndex in goodsList" :key="brandItem.id"
style="margin-bottom: 20rpx;">
<view class="brandTitle">{{brandItem.name}}</view>
<view class="brandItem" v-for="goodItem,goodIndex in brandItem.detail" >
<homeGoodsItem :goodItem="goodItem" @createOrder="createOrder" :key="goodItem.id"></homeGoodsItem>
</view>
</view>
onShow() {
// 修改key值,更新子组件,重置商品个数为1
for(var i = 0; i < this.goodsList.length; i ++ ){
for(var j = 0; j < this.goodsList[i].detail.length; j++){
this.goodsList[i].detail[j].id++
}
}
}
当然,没有必要去重新渲染子组件,体验不好。key值改变之后,元素就没有复用了。
因为vue监测不到数组的变化,数组有特殊性,可以使用this.$set()方法更新数组,就可以了。
async getGoodsList() {
let result = await uni.$httpRequest({
url: '/getGoodsList?type=2',
method: 'get'
}, {}, false)
this.$set(this, "goodsList", result)
},