解决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 相关文章推荐
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
详解React中合并单元格的正确写法
Jan 08 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
世界上第一台立体声收音机
2021/03/01 无线电
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
javascript判断office版本示例
2014/04/11 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python openpyxl模块的使用详解
2021/02/25 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
转预备党员政审材料
2014/02/06 职场文书
股份合作协议书
2014/04/12 职场文书
初中作文评语大全
2014/04/23 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
预备党员入党感言
2015/08/01 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
JavaScript文档对象模型DOM
2021/11/20 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis