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 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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 UTF8编码内的繁简转换类
2009/07/20 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python编程求质数实例代码
2018/01/31 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python得到单词模式的示例
2018/10/15 Python
python画双y轴图像的示例代码
2019/07/07 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python scatter函数用法实例详解
2020/02/11 Python
python扫描线填充算法详解
2020/02/19 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
大学学风建设方案
2014/05/04 职场文书
学校个人对照检查材料
2014/08/26 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
农业生产宣传标语
2014/10/08 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
检举信的写法
2019/04/10 职场文书