解决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 相关文章推荐
Javascript Object.extend
May 18 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
JQuery中clone方法复制节点
May 18 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JS高级运动实例分析
Dec 20 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript前补零操作实例
2015/03/11 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
详解离线安装npm包的几种方法
2018/11/25 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python线程同步的实现代码
2018/10/03 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python线程threading模块用法详解
2020/02/26 Python
Python修改DBF文件指定列
2020/12/19 Python
Shell脚本如何向终端输出信息
2014/04/25 面试题
报关专员求职信范文
2014/02/22 职场文书
班级课外活动总结
2014/07/09 职场文书
安全标兵事迹材料
2014/08/17 职场文书
初中中等生评语
2014/12/29 职场文书
师德承诺书2015
2015/04/28 职场文书