<div v-for="(item,i) in doc" :key="i">
<el-row>
<el-col :span="">
文案模块{{i+}}
</el-col>
<el-col :span="" :offset="">
<el-button @click="deletemodel(item,doc,i)" size="small">删除</el-button>
</el-col>
</el-row> <p class="pline"></p>
<el-form-item label="请设置模块标题:">
<el-input placeholder="请输入3-6个字的标题" class="uploadwidth" maxlength="" minlength="" v-model="item.title"></el-input>
</el-form-item>
<el-form-item >
<!-- <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8}" class="inputwidth" v-model="item.content" placeholder="请输入文案"></el-input> -->
<vue-ueditor-wrap v-model="item.content"></vue-ueditor-wrap>
</el-form-item> </div> <div v-for="(item,i) in pic" :key="i">
<el-row>
<el-col :span="">
图片模块{{i+}}
</el-col>
<el-col :span="" :offset="">
<el-button @click="deletemodel(item,pic,i)" size="small">删除</el-button>
</el-col>
</el-row> <p class="pline"></p>
<el-form-item label="请设置模块标题">
<el-input class="uploadwidth" placeholder="请输入3-6个字的标题" maxlength="" minlength="" v-model='item.title'></el-input>
</el-form-item>
<el-form-item label="PC端:">
<el-upload class="upload-demo uploadwidth" action="/admin/upload" name="file" :limit="" :on-success="successPicPc" :file-list="fileList">
<div style="display:inline-block; margin-left:10px;" slot="tip"> <el-popover v-if="item.pcTopImgUrl!==null&&item.pcTopImgUrl!==undefined&&item.pcTopImgUrl!==''" placement="right" width="" trigger="click">
<img :src="item.pcTopImgUrl" alt="" width="100%">
<el-button slot="reference" size="small">查看</el-button>
</el-popover>
</div>
<el-button size="small" type="primary" @click="test(i)">上传</el-button>
</el-upload> </el-form-item>
<el-form-item label="H5端:">
<el-upload class="upload-demo uploadwidth" action="/admin/upload" name="file" :on-success="successPicH5" :limit="" :file-list="fileList">
<div style="display:inline-block; margin-left:10px;" slot="tip"> <el-popover v-if="item.h5TopImgUrl!==null&&item.h5TopImgUrl!==undefined&&item.h5TopImgUrl!==''" placement="right" width="" trigger="click">
<img :src="item.h5TopImgUrl" alt="" width="100%">
<el-button slot="reference" size="small">查看</el-button>
</el-popover>
</div>
<el-button size="small" type="primary" @click="test(i)">上传</el-button>
</el-upload>
</el-form-item>
</div>

图片模块在删掉的时候她的富文本框没有被删除,其他部分的被删除了,就这个出现了滞后性,经过排查是v-for的key值出现的bug

上面两个部分的代码框架是类似的,vue的数据驱动是精准的数据驱动,详细的原因大家去查v-for的key值吧,我的解决方法是

把key值改一下,在原来+10.其实最好key值是唯一的,不要用i,索引

vuejs的v-for遇到过的数据渲染错误的bug,原因是和key值有关的更多相关文章

  1. [BUGCASE]FixedDataTable表格数据渲染错误

    一.问题描述 广告配置中绑定第三方规格ID表格数据,有一部分展示错乱,具体如下: 表格组件使用 Facebook 的 (fixed-data-table) 组件 二.原因分析 1.检查props 先查 ...

  2. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  3. json数据渲染表单元素出现的问题

    解析页面表单元素 parseForm: function () { var data = {}; $(this).find('input').each(function () { switch ($( ...

  4. 数据表记录包含表索引和数值(int范围的整数),请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出

    此题如果直接使用有序的TreeMap就不需要这样折腾: 1.map的key值唯一性,故就不在需要set集合来去重 2.使用map后利用key的唯一性,把序列号相同的数据直接加在一起,代码会很简洁 pa ...

  5. Spring MVC 4.1.4 RESTFUL风格返回JSON数据406错误处理

    Spring MVC 4.1.4 RESTFUL风格返回JSON数据406错误处理 今天在使用spring4.1.4,使用ResponseBody注解返回JSON格式的数据的时候遇到406错误. 解决 ...

  6. 【日常笔记】datatables表格数据渲染

    现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据 使用datatables可以更方便的来渲染数据 [中文api]http://datatables.club/index.htm ...

  7. DataContext 数据在F5刷新频繁,会出现数据读取错误

    DataContext 数据在F5刷新频繁,会出现数据读取错误 DataContext是 Linq to sql数据模型的底层数据库对象所有LInq数据表对象都是由它派生的, 只要建立一个数据库操作, ...

  8. 解决sql2008连接数据库,无法为该请求检索数据,错误916

    通常在使用sql server management studio 2008 连接数据库,可以链接上,但是无法查看自己的数据库,点击数据库或刷新数据库列表后,提示:无法为该请求检索数据,错误916,如 ...

  9. 非正确使用浮点数据由项目产生BUG讨论的问题

    乘分配 当小学学会了乘法分配.详细乘法分配:并与多个两个数相乘的,他们能够把这个数字乘以,然后加入.由于一个恒定.乘法分配律也能够使用表达式的定义"(a+b)×c = a×c+b×c&quo ...

随机推荐

  1. SQL SERVER查询数据库所有表的大小,按照记录数降序排列

    SELECT B.NAME,A.ROW_COUNT FROM SYS.DM_DB_PARTITION_STATS A,SYS.OBJECTS BWHERE A.OBJECT_ID=B.OBJECT_I ...

  2. String 的 intern() 方法解析

    一.概述 JDK7 之前和之后的版本,String 的 intern() 方法在实现上存在差异,本文的说明环境是 JDK8,会在文末说明 intern() 方法的版本差异性. intern() 方法是 ...

  3. xml-mapping xml 与 java 对象转换映射框架,像 XStream 一样优雅地读写xml

    xml xml 是 java 实现的 xml 框架. 希望以最优雅的方式进行 xml 和 java 之间的转换处理,一行代码搞定一切. 特点 对象的和 xml 的互相映射 支持注解 @Alias 指定 ...

  4. 微信支付 第三篇 微信调用H5页面进行支付

    上一篇讲到拿到了 预支付交易标识 wx251xxxxxxxxxxxxxxxxxxxxxxxxxxxxx078700 第四步,是时候微信内H5调起支付了! 先准备网页端接口请求参数列表 微信文档中已经明 ...

  5. `MediaDevices.getUserMedia` `undefined` 的问题

    通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境: localhost 域 开启了 HTTPS 的域 使用 file:/// 协议打开 ...

  6. How to: Map a Persistent Class to a Database View Which Has No Key Field如何:映射持久化类到无主键数据库视图

    With XAF, you can build new applications from scratch or maintain existing databases. The How to: Ge ...

  7. How to: Change the Format Used for the FullAddress and FullName Properties 如何:更改用于FullAddress和FullName属性的格式

    There are FullAddress and FullName properties in the Address and Person business classes that are su ...

  8. Vue-cli项目部署到Nginx

    项目环境: 0. Nginx使用 以windows版为例,下载niginx压缩包并解压到任意目录,双击nginx.exe,在浏览器中访问http://localhost,如果出现Welcome to ...

  9. FCC---CSS Flexbox: Use the flex-direction Property to Make a Row

    Adding display: flex to an element turns it into a flex container. This makes it possible to align a ...

  10. ImageView设置rounded corner

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/207 ImageView设置rounded corner ...