7***@qq.com
7***@qq.com
  • 发布:2020-11-14 09:20
  • 更新:2020-11-14 12:30
  • 阅读:1540

【报Bug】v-model绑定的数据不能正确显示问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window7

HBuilderX类型: 正式

HBuilderX版本号: 2.9.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 黑鲨1

页面类型: vue

打包方式: 离线

项目创建方式: HBuilderX

示例代码:
<view class="grace-items">  
          <button @click="addItems" class="btn">添加+</button>  

</view>  

<view class="item" v-for="(item, index) in dataList" :key="item.id">  
    <button @click="del(item)" class="del-btn">-</button>             
    <view class="top-border bottom-border">  
        <textarea   auto-height="true"  placeholder="描述" v-model="item.remark"/>  
    </view>   
 </view>

js

 data() {  
            return {  
                dataList:[  
                   {"remark":"测试数据1"},  
                  {"remark":"测试数据2"},  
                  {"remark":"测试数据3"},  
               ]  
            }  
        },  
                addItems(){  
                     var a=[{"remark":"测试数据"}];  
                      this.dataList.push(a)  
                },  
                 del(e){  
                        var index=this.selectObj.indexOf(e)  
              if(index!==-1){  
                  this.dataList.splice(index,1);  
                        }  
          },  

操作步骤:

列表默认有数据,
1、点击删除按钮删除某一条数据,
2、点添加按钮添加一条数据
3、出现bug:新增的数据显示了已删除数据,但值为空

预期结果:

正确显示数据

实际结果:

实际数据正确,但显示错误

bug描述:

描述:使用v-for渲染列表时,使用v-model实现双向绑定,当点击删除按钮,删除当前行数据,点添加按钮时往列表插入数据。
bug:在点击删除按钮时,列表正常删除,点添加按钮时,会显示未删除前的数据,但实际上dataList是没有之前的数据,dataList是正确的,但显示有问题;

2020-11-14 09:20 负责人:无 分享
已邀请:
大肥光光

大肥光光

var a=[{"remark":"测试数据"}];
this.dataList.push(a)
push的数据结构不对
this.dataList.push({"remark":"测试数据"}) 或者 this.dataList.push(...a)

chenli

chenli

:key 不使用index
换个唯一标识看看

  • 7***@qq.com (作者)

    换了,还是有bug

    2020-11-14 10:10

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