过程:从后台拉去到数据由父组件传递给子组件,子组件在watch中监听传过来的数据,在拆分重构后赋值给data里的lists_R,在然后点击修改lists_R里的某一项

数据结构:数组里面套对象,对象包裹字符串和数组,然后数组又套对象
[{String,[{...},{...},{...}] },{ String,[{...},{...},{...} }]

HTML部分

<block v-for="(item,index) in item.baskets" :key="index">
 	<view class="content-view">
		<!-- 左边商品图片 -->
		<view class="content-img">
			<image :src="item.image" mode="aspectFill"></image>
		</view>
		<!-- 右边商品 -->
		<view class="content-title">
			<text class="conteng-take">{{item.input}}</text>
			<view class="conteng-monthly">
				<block v-for="(itemdata,index) in item.tags" :key="index">
					<text>{{itemdata}}</text>
				</block>
			</view>
			<view class="conteng-starting">
				<text>月售10</text>
			</view>
			<view class="conteng-price">
				<!-- 商品价,现价 -->
				<view class="conteng-shi">¥{{item.Discount}}</view>
				<!-- 划线价,原价 -->
				<view class="conteng-hua">¥{{item.Price}}</view>
				<view class="ordering-price">
					<image src="/static/coen/jianhao.png" mode="widthFix" @click="minus(listIndex,index,item.amount)"></image>
					<text class="amounting">{{item.amount}}</text>
					<image src="/static/coen/jiahao.png" mode="widthFix" @click="add(listIndex,index,item.amount)"></image>
 				</view>
 			</view>
 		</view>
 	</view>
 </block>

问题
在这里插入图片描述
点击时

//methods里的方法
add(lstIdx,idx,num){
	console.log(this.lists_R[lstIdx].baskets[idx]);
	this.$set(this.lists_R[lstIdx].baskets[idx],'amount',num + 1)
}

控制台打印
在这里插入图片描述
这里数据更新了,视图层并没有更新(大佬可能已经看出问题了)

因为我在watch里有一个对象合并的操作

如下代码:

baskets.push(Object.assign(ite.objdis,{amount: 0,openid: ite.openid,id: ite._id}))

当把{amount: 0,openid: ite.openid,id: ite._id}这个对象复制到amount在这里插入图片描述
这里并没有set/get amount ....(其实我也不知道这个这么说 [尴尬] ,懂得大佬在评论指点一下 [跪谢])

所以不会在视图层更新

解决方法

//仔细看你会发现和上面不一样
baskets.push(Object.assign({amount: 0,openid: ite.openid,id: ite._id},ite.objdis))

其实就是调换一下复制的对象,这个时候是吧ite.objdis复制到{amount: 0,...}

此时set/get amount ...都有了
在这里插入图片描述
再去点击,视图层就更新了

在这里插入图片描述

ps:果然还是大晚上解决bug效率高

—————————————————————

小白上路,请多指教!!

Logo

前往低代码交流专区

更多推荐