解决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 :nth-child前有无空格的区别分析
Jul 11 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
js实现聊天对话框
Feb 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
PHP框架性能测试报告
2016/05/08 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php实现微信企业转账功能
2018/10/02 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JQuery筛选器全系列介绍
2013/08/27 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python创建xml文件示例
2017/03/22 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python查看列的唯一值方法
2018/07/17 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
一套英文Java笔试题面试题
2016/04/21 面试题
技校生自我鉴定
2013/12/08 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
学历公证书范本
2014/04/09 职场文书
建房协议书
2014/04/11 职场文书
锦旗标语大全
2014/06/23 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
作文批改评语
2014/12/25 职场文书
追讨欠款律师函
2015/06/24 职场文书
2019个人工作总结
2019/06/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python