解决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 必填项判断表单是否为空的方法
Sep 14 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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的字符串用法小结
2010/06/08 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
青年教师典范事迹材料
2014/01/31 职场文书
感恩寄语大全
2014/04/11 职场文书
一年级学生期末评语
2014/04/21 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年施工员工作总结
2014/11/18 职场文书
行政答辩状范文
2015/05/21 职场文书
答辩状格式范本
2015/05/22 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
团结友爱主题班会
2015/08/13 职场文书
学习雷锋主题班会
2015/08/14 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL