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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
JS中的三个循环小结
2017/06/20 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python机器学习实战之树回归详解
2017/12/20 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
购房协议书范本
2014/04/11 职场文书
合作经营协议书
2014/04/17 职场文书
干部鉴定材料
2014/05/18 职场文书
酒店端午节活动方案
2014/08/26 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
管理失职检讨书范文
2015/05/05 职场文书
建国大业观后感800字
2015/06/01 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android