vue父组件数据更新后,子组件页面没刷新

 可以修改子组件绑定的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)
			},

猜你喜欢

转载自blog.csdn.net/2201_75783276/article/details/131312985