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 日期比较大小的简单实例
Jan 13 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
jQuery动态添加
Apr 07 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 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 使用file_get_contents读取大文件的方法
2014/11/13 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Django model update的多种用法介绍
2020/03/28 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python 带时区的日期格式化操作
2020/10/23 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
信息管理应届生求职信
2014/03/07 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技