vue数据双向绑定的注意点


Posted in Javascript onJune 23, 2017

最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败

直接贴代码:

<el-form :model="addClass" :rules="rules" ref="addClass">
   <el-form-item label="表单分类名称" prop="NAME" :label-width="formLabelWidth">
      <el-input v-model="addClass.NAME" auto-complete="off"></el-input>
   </el-form-item>
   <el-form-item label="表单分类描述" prop="DESCRIBE" :label-width="formLabelWidth">
      <el-input type="textarea" autosize row=5 v-model="addClass.DESCRIBE" auto-complete="off"></el-input>
   </el-form-item>
 </el-form>

上面一个简单的element的表单;addClass就是我要将数据绑定到的对象;他初始是一个空对象;我需要在其他地方读取然后给他添加属性,同时给表单进行绑定。

在这个过程中就发现,双向绑定失败了 , 而且也没有报错。

我是通过obj.xxx = xxx;这种方法进行绑定; 经过测试发现双向绑定并没有实现。

解决方法:

参照 VUE官方文档: https://cn.vuejs.org/v2/guide/reactivity.html ;

受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
Vue.js常用指令的使用小结
Jun 23 #Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 #Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 #Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python的re模块使用方法详解
2019/07/26 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
如何开启linux的ssh服务
2013/06/03 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
反四风对照检查材料
2014/09/22 职场文书
党员评议思想汇报
2014/10/08 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Go 中的空白标识符下划线
2022/03/25 Golang
AngularJS实现多级下拉框
2022/03/25 Javascript
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers