解决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 相关文章推荐
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php xml 入门学习资料
2011/01/01 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
php报错502badgateway解决方法
2019/10/11 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
听课评课活动心得体会
2016/01/15 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL