uni-app view 不随 list 条数更新

uni-app view 不随 list 条数更新

开发环境 版本号 项目创建方式
Mac 10.13.5 HBuilderX

示例代码：

<view class="yt-list" id="fahuo">  
    <view class="yt-list-cell b-b" @tap="addline(storeSettlement.shipinfo)">  
    <text class="cell-tit clamp">自定义发货(选填)</text><text style="font-size: 30upx;">+</text>  
    </view>  
    <view class="yt-list-cell b-b" v-for="(shipitem, index) in storeSettlement.shipinfo" :key="index">  
        <input class="desc" type="text" placeholder="发货时间" v-model="shipitem.shiptime"/>  
        <input class="desc" type="text" placeholder="发货数量" v-model="shipitem.shipcount"/>  
        <text @tap="deductline(storeSettlement.shipinfo,index)" style="width:50upx;"> - </text>  
    </view>  
</view>  

addline(shipinfos){  
    var shipitem = {"shiptime":"","shipcount":0};  
    shipinfos.push(shipitem);  
},  
deductline(shipinfos,index){  
    shipinfos.splice(index,1);  
}

操作步骤：

…

预期结果：

view 界面 随 list 更新条数

实际结果：

view 界面不更新.

bug描述：

通过 list 来控制 view 的个数, list 个数添加，view 界面不更新，只有重新打开页面，view 界面才刷新。


更多关于uni-app view 不随 list 条数更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue基础知识范畴，详情 ：链接

更多关于uni-app view 不随 list 条数更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你看我代码，我就是用push,splice 操作，单独用了个页面是可以更新的，这个页面不行，

问题出在数组的响应式更新上。在uni-app中，直接通过索引修改数组或使用push/splice方法有时无法触发视图更新。以下是解决方案：

  1. 使用Vue.set或this.$set方法确保响应式更新：
addline(shipinfos){
    var shipitem = {"shiptime":"","shipcount":0};
    this.$set(shipinfos, shipinfos.length, shipitem);
},
deductline(shipinfos,index){
    this.$set(shipinfos, index, null); // 先设为null
    shipinfos.splice(index,1); // 再删除
}
  1. 或者强制重新渲染组件：
addline(shipinfos){
    var shipitem = {"shiptime":"","shipcount":0};
    shipinfos.push(shipitem);
    this.$forceUpdate();
}
  1. 确保storeSettlement是响应式的，最好在data中声明：
data() {
    return {
        storeSettlement: {
            shipinfo: []
        }
    }
}
回到顶部