Vue $set()数据更新了 视图层没更新?
过程:从后台拉去到数据由父组件传递给子组件,子组件在watch中监听传过来的数据,在拆分重构后赋值给data里的lists_R,在然后点击修改lists_R里的某一项数据结构:数组里面套对象,对象包裹字符串和数组,然后数组又套对象[{String,[{...},{...},{...}] },{ String,[{...},{...},{...} }]HTML部分<block v-for="(
过程:从后台拉去到数据由父组件传递给子组件,子组件在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效率高
—————————————————————
小白上路,请多指教!!
更多推荐
所有评论(0)