Vue响应式添加、修改数组和对象的值


Posted in Javascript onMarch 20, 2017

有些时候,不得不想添加、修改数组和对象的值,但是直接添加、修改后又失去了getter、setter。

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue

2. 修改数组的长度时,例如: vm.items.length = newLength

为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

避免第二种情况,使用 splice:

example1.items.splice(newLength)

 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)

示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 
 <div id="app">
 <ol>
 <li v-for="data in list">{{data.id}} - {{data.name}}</li>
 </ol>
 </div>


 <script type="text/javascript" src="../underscore/underscore-min.js"></script>
 <script type="text/javascript" src="./vue.2.1.8.min.js"></script>
 <script type="text/javascript">
 var oVue = new Vue({
 el : '#app',
 data : {
 list : [
  {id : 5},
  {id : 6}
 ]
 }
 });
 </script>
</body>
</html>

Vue响应式添加、修改数组和对象的值

以上就是VueI添加修改数组与对象值时同时将触发状态更新的方法,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
vue-loader教程介绍
Jun 14 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
You might like
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
常见的jQuery选择器汇总
2014/11/24 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
师范生个人推荐信
2013/11/29 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
会计顶岗实习心得
2014/01/25 职场文书
校运会入场式解说词
2014/02/10 职场文书
学前教育专业求职信
2014/09/02 职场文书
前台接待岗位职责
2015/02/03 职场文书
七一建党节慰问信
2015/02/14 职场文书