当前位置:首页 > 日记 > 正文

vue数据双向绑定的注意点

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)

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

相关文章

pscs3版本怎样安装

pscs3版本怎样安装

安装,方法,版本,电脑软件,  ps款软件版本非常多,今天我们来说说pscs3这个版本的安装方法。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于pscs3版本怎样安装,供您参阅。pscs3版本安装的方法1、先右键点击软件安装包,再选择打…

jQuery用noConflict代替$的实现方

jQuery用noConflict代替$的实现方

方法,电脑软件,jQuery,noConflict,js框架很多的情况下,很容易出现冲突,建议使用noConflict代替$//消除$对jquery缩写$.noConflict();//使用了noConflict后,用$就会无效,应用jQueryjQuery(document).ready(function(){ console.log("sdf");})…

微信朋友圈怎么关闭?

微信朋友圈怎么关闭?

微信朋友圈,电脑软件,  现在的微信朋友圈,不是被微商刷屏,就是被广告霸占,完全没必要再观看朋友圈了。如果你想要关闭朋友圈的话,就让小编来教教大家正确注销微信朋友圈的方法,希望能够帮助到你们。微信朋友圈的关闭方法  1、登陆微信后,进入…

excel2007打印不全的解决方法excel

excel2007打印不全的解决方法excel

解决方法,不全,电脑软件,strong,  Excel中打印不全该如何解决呢?接下来是小编为大家带来的excel2007打印不全的解决方法,供大家参考。excel2007打印不全的解决方法打印不全解决步骤1:首先,选择【页面布局】选项卡,点击右下角的扩展按钮。exce…

js中toString | 和String | 区别详

js中toString | 和String | 区别详

详解,区别,电脑软件,js,toString,我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的1、.toString()可以将所有的的数据都转换为字符串,但是要排除null 和 undefined例如将false转为字符串类…

vue通过watch对input做字数限定的

vue通过watch对input做字数限定的

方法,字数,电脑软件,vue,watch,之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了<div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div…

vue组件间通信解析

vue组件间通信解析

组件,电脑软件,vue,组件间通信(父子,兄弟)相关链接\组件通信:点击查看学习链接:Vue.js——60分钟快速入门点击查看分分钟玩转Vue.js组件点击查看父组件传子组件父传子方法(一) 属性传递 props//子组件<template> <ul> <li v-for="item in dataL…

excel求和公式的使用方法excel求和

excel求和公式的使用方法excel求和

公式,使用方法,电脑软件,excel,strong,  Excel中的求和公式具体该如何为数据进行求和呢?接下来是小编为大家带来的excel求和公式的使用方法,供大家参考。下面是由小编分享的excel求和公式的使用方法,以供大家阅读和学习。希望对你有帮助!exc…

Javascript中八种遍历方法的执行速

Javascript中八种遍历方法的执行速

遍历,执行,方法,八种,深度,前言遍历数组或对象是一名程序员的基本素养之一. 然而遍历却不是一件简单的事, 优秀的程序员知道怎么去选择合适的遍历方法, 优化遍历效率. 本篇将带你走进JavaScript遍历的世界, 享受分析JS循环的快感. 本篇所有…

javascript过滤数组重复元素的实现

javascript过滤数组重复元素的实现

重复元素,过滤,数组,方法,电脑软件,javascript过滤数组重复元素的实现方法 以下是在网上找的资料,直接在项目中可以使用,大家可以参考下:实现代码:function filterArray(receiveArray){var arrResult = new Array(); //定义一个返回结果…

JavaScript条件判断_动力节点Java

JavaScript条件判断_动力节点Java

条件判断,学院,节点,动力,电脑软件,JavaScript使用if () { ... } else { ... }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如下:var age = 20;if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult');} e…

基于Bootstrap分页的实例讲解 | 必

基于Bootstrap分页的实例讲解 | 必

分页,必看,实例,电脑软件,Bootstrap,前面的话分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验。本文将详细介绍Bootstrap分页概述在Bootstrap框架中提供了两种分页导航:? 带页码的分页导航? 带翻页的分页导航页码分页带页码…

软件日记