六狱
六狱
  • 发布:2019-10-14 13:21
  • 更新:2019-10-14 13:39
  • 阅读:902

【报Bug】App端v-for无法重新渲染,小程序一切正常

分类:uni-app

详细问题描述

公司的一个商城项目,使用了一个添加商品购买数量的组件,在改变对象数值后,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则显示该列

  1. 将输入的值通过Vue.set赋给对象中的num值
  2. 打印对象发现对象内容已发生变动,v-for重新渲染
  3. 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

2019-10-14 13:21 负责人:无 分享
已邀请:
caicaicai21

caicaicai21 - Java后端开发

如果不会重新渲染,可以尝试使用

this.$forceUpdate();
  • 六狱 (作者)

    试过了,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

该问题目前已经被锁定, 无法添加新回复