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)
			},

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值