解决Vue 通过下表修改数组,页面不渲染的问题


Posted in Javascript onMarch 08, 2018

需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值:

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

会导致Vue无法更新View。

正确的方法是不要对数组元素赋值,而是更新:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

或者,通过splice()方法,删除某个元素后,再添加一个元素,达到“赋值”的效果:

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue可以监听数组的splice、push、unshift等方法调用,所以,上述代码可以正确更新View。

解决Vue 通过下表修改数组,页面不渲染的问题

以上这篇解决Vue 通过下表修改数组,页面不渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
微信jssdk用法汇总
Jul 16 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php header功能的使用
2013/10/28 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript函数详解
2014/11/17 Javascript
javascript基本类型详解
2014/11/28 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
css3 transform属性详解
2014/09/30 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
倡议书范文大全
2015/04/28 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python