详细问题描述
公司的一个商城项目,使用了一个添加商品购买数量的组件,在改变对象数值后,App端渲染画面未发生改变,小程序端一切正常
[内容]
<view style="padding-bottom: 40upx" v-if="!updatetemplate">
<view class="flex-row flex-y-center mb-20" style="padding-top: 20upx;">
<view class="flex-grow-1">数量</view>
<view class="flex-grow-0">
<view class="flex-row number-input-box">
<view @click="numberSub()" class="flex-grow-0 flex-x-center flex-y-center number-btn number-sub" :class="{'disabled':num === 0}">-</view>
<view class="flex-grow-0">
<input class="flex-grow-1 number-input" type="number" v-model="num"></input>
</view>
<view @click="numberAdd()" class="flex-grow-0 flex-x-center flex-y-center number-btn number-add">+</view>
</view>
</view>
</view>
</view>
upattritem() {
let _this = this
if (_this.num > _this.number && _this.number != -1) {
if (_this.number >= _this.goods.buymax) {
_this.num = _this.goods.buymax
} else {
_this.num = _this.number
}
uni.showToast({
title: '库存不足',
icon: 'none',
mask: false,
duration: 1500
});
} else if (_this.num >= _this.goods.buymax && _this.goods.buymax > 0) {
_this.num = _this.goods.buymax
uni.showToast({
title: '该商品限购' + _this.goods.buymax + '件',
icon: 'none',
mask: false,
duration: 1500
});
}
// 没有规格的情况
if (_this.goods.attr.length == 0) {
let array = {}
array.goods_id = _this.goods.goods_id
array.num = _this.num
array.singular = 1
Vue.set(_this.goods.attrrelationitem,0,array)
}
// 坐标清空的情况
if (!_this.attrinfo_id.length && _this.goods.attr.length > 0) {
for (let i = 0; i < _this.chooseindex.length; i++) {
if (_this.chooseindex[i] >= 0) {
_this.attrinfo_id[i] = _this.goods.attr[i].child[_this.chooseindex[i]].goods_attr_id
}
}
}
// 更新对应num
for (let i = 0; i < _this.goods.attrrelationitem.length; i++) {
if (_this.goods.attrrelationitem[i].attrinfo_id == _this.attrinfo_id.join(',')) {
let tempattr = _this.goods.attrrelationitem[i]
tempattr.num = _this.num
Vue.set(_this.goods.attrrelationitem,i,tempattr)
}
}
this.reload();
},
重现步骤
[步骤]
1.v-for循环对象,获取购买列表中的各项,若购买数量大于0则显示该列
- 将输入的值通过Vue.set赋给对象中的num值
- 打印对象发现对象内容已发生变动,v-for重新渲染
- App端渲染结果未发生变化,小程序发生变化
[结果]
[期望]
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]
IDE运行环境说明
HbuildX 2.3.3
[IDE版本号]
[windows版本号]
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式?]
编译模式为自定义组件模式
App运行环境说明
[Android版本号]
8.0.0
[iOS版本号]
[手机型号]
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
联系方式
[QQ]
2246585559
六狱 (作者)
试过了,this.forgeUpdate()和用v-if控制渲染都试过了
2019-10-14 13:44
六狱 (作者)
感觉App端就好像是我改错了变量,循环的变量并未发生变动一样,然而我打印变量却发现这个变量确实有变动
2019-10-14 13:45
caicaicai21
回复 六狱: 如果确认数据已经改变,那有可能是Vue的坑,直接修改数组里面的数据,Vue可能不会重新渲染。
2019-10-14 14:02
六狱 (作者)
回复 caicaicai21: 直接改变对象值才会导致v-for无法自动重新渲染,然而我用的是vue.set应该是没有问题的,而且用v-if或者$forceupdate不也手动重新渲染了吗
2019-10-14 14:12