解决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中的alert()函数使用技巧详解
Dec 29 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python中比较两个列表的实例方法
2019/07/04 Python
Python创建临时文件和文件夹
2020/08/05 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
机电一体化职业规划书
2014/01/07 职场文书
初中体育教学反思
2014/01/14 职场文书
优秀干部获奖感言
2014/01/31 职场文书
市政管理求职信范文
2014/05/07 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书