Vue用v-for重渲染
来源:互联网 发布:linux net snmp安装包 编辑:程序博客网 时间:2024/06/06 04:17
当v-for循环的数据被修改时,我发现没有重新渲染,我的代码如下:
<div id="app"> <ul class="list-group"> <li v-for="(list, index) in lists" class="list"> {{list.title}} </li> </ul></div>
var app = new Vue({ el: '#app', data: { lists: [ {title: '标题1'}, {title: '标题2'}, {title: '标题3'}, {title: '标题4'}, {title: '标题5'}, {title: '标题6'}, ] }, created: function () { var info = {}; info.title= '测试标题'; app.lists[1] = info; //Vue.set(app.lists, i, info); //app.lists.splice(i, 1, info); }});
由于时间周期的问题,created在数据被渲染后执行了,但是在把app.lists[1]修改后,并没有发生重新渲染,于是我查了一下官方文档,
在v-for处有一个注意事项,上面是这样写的
注意事项(Caveats)
由于 JavaScript 的限制,Vue 无法检测到以下数组变动:
- 当你使用索引直接设置一项时,例如 vm.items[indexOfItem] = newValue
- 当你修改数组长度时,例如 vm.items.length = newLength
为了解决第 1 个问题,以下两种方式都可以实现与 vm.items[indexOfItem] = newValue 相同的效果,但是却可以通过响应式系统出发状态更新:
// Vue.setVue.set(example1.items, indexOfItem, newValue)
// Array.prototype.spliceexample1.items.splice(indexOfItem, 1, newValue)
为了解决第 2 个问题,你可以使用 splice:
example1.items.splice(newLength)
所以我将app.lists[1] = info;这句注释掉,加上
Vue.set(app.lists, i, info);app.lists.splice(i, 1, info);
就能够使用v-for重渲染了
阅读全文
0 0
- Vue用v-for重渲染
- vue渲染多层数据用v-for
- VUE条件渲染(v-if v-show v-for)
- Vue.js中的列表渲染:v-for
- VUE指令-列表渲染v-for
- 8-Vue指令之列表渲染 V-for
- Vue监听当数据发生改变v-for渲染完成
- 监听vue.js中v-for全部渲染完成
- vue.js中的列表渲染(循环渲染)(v-for)
- Vue v-if条件渲染
- vue v-for v-if
- vue v-for 数据处理
- vue v-for详解
- vue v-for 嵌套
- vue使用v-for渲染列表属性需要:="items.attribute"绑定
- VUE.JS v-for渲染过程中 $index is not defined
- vue+iview 当v-for不渲染问题 因为遇到Modal组件
- VUE指令条件渲染v-if
- Redis高并发接口开发调试
- 关于解决tomcat的一些问题-内存溢出 PermGen space以及超时
- poj3349(数字hash)
- 过滤器详解
- 搭建RocketMQ踩的坑。。。
- Vue用v-for重渲染
- kafka 配置文件参数详解
- Unity3D音乐音效学习
- 机器学习小试(5)机器学习应用前的认识准备
- SQOOP 添加oracle 驱动
- es6-箭头函数详解
- Rails中的sql小记
- 数据结构实验之链表二:逆序建立链表
- 深入解析Java对象的hashCode和hashCode在HashMap的底层数据结构的应用