vue数据双向绑定的注意点
作者:窝代码 发布时间:2024-05-05 09:07:43
标签:vue,数据绑定
最近一个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)


猜你喜欢
- 1. Document.form.item 问题 现有问题:  
- 公司网站后台使用的eWebEditor来添加发布新闻之类的,但把电脑的IE升级到8之后一直没办法添加附件之类的,症状就是在点击编辑器按钮时就
- 本文是通过深度学习框架keras来做SQL注入特征识别, 不过虽然用了keras,但是大部分还是普通的神经网络,只是外加了一些规则化、dro
- 前言很多中后台业务的系统中,表格是最高频的组件之一,其中一般包括搜索条件、表格展示、表格操作列、分页等。那么我们二次封装的这个表格组件就需要
- # -*- coding: utf-8 -*-# @Time : 2019-11-18 09:31# @Author : cxa# @Fil
- 1 关于 Matplotlib 模块Matplotlib 是一个由 John Hunter 等开发的,用以绘制二维图形的 Python 模块
- 本文实例讲述了PHP Static延迟静态绑定用法。分享给大家供大家参考,具体如下:PHP5.3以后引入了延迟静态绑定static,它是为了
- 本文实例讲述了python迭代器的简单用法,分享给大家供大家参考。具体分析如下:生成器表达式是用来生成函数调用时序列参数的一种迭代器写法生成
- 中间件中间件是放在客户端和服务端的中间。 当你的客户端对某个接口发起一个请求,但是在到达接口2之前,这里是有一层中间件的处理。一般
- 一、软件测试大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必须要有相应的质量保证活动,而软件
- mysql支持很多字段类型,包括数值类型、日期/时间类型和字符串(字符)类型;在使用时需要考虑到存储空间,存储效率;几种列类型描述使用了下述
- 1。mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数
- 我们知道分析MySQL语句查询性能的方法除了使用EXPLAIN 输出执行计划,还可以让MySQL记录下查询超过指定时间的语句,我们将超过指定
- 一、mock是什么?英译中含义有:虚假的; 不诚实的; 模仿的; 模拟的 这个意思这个库的主要功能就是模拟一些事务官方解释:Mock是Pyt
- 一、导包import pandas as pdimport matplotlib.pyplot as plt二、绘制简单折线数据:有一个Ex
- python中的列表和元组# 1.列表的格式# [数据1,数据2,数据3,···]# 列表 可变数据类型# 列表可以存储多个数据,数据之间的
- 视图视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,并可以将其当作
- python中的turtle库是3.6版本中新推出的绘图工具库,那么如何使用呢?下面小编给大家分享一下。首先打开pycharm软件,右键单击
- 卷积核可视化import matplotlib.pyplot as pltimport numpy as npfrom keras impo
- <%'============================================================