脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue数据双向绑定

vue数据双向绑定的注意点

 更新时间：2017年06月23日 11:47:13   作者：窝代码  
这篇文章主要为大家详细介绍了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)

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

您可能感兴趣的文章:

相关文章

  • Vue之修改数据页面不更新的问题

    Vue之修改数据页面不更新的问题

    这篇文章主要介绍了Vue之修改数据页面不更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Electron 如何调用本地模块的方法

    Electron 如何调用本地模块的方法

    这篇文章主要介绍了Electron 如何调用本地模块的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue 2.0路由之路由嵌套示例详解

    vue 2.0路由之路由嵌套示例详解

    这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • Element树形控件el-tree实现一键全选、反选功能

    Element树形控件el-tree实现一键全选、反选功能

    最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下
    2023-10-10
  • 一文弄懂Vite 配置文件

    一文弄懂Vite 配置文件

    Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,本文就来介绍下Vite 配置文件,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...

    vue3+vite中报错信息处理方法Error: Module “path“ has&nb

    这篇文章主要介绍了vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • vue.js学习之递归组件

    vue.js学习之递归组件

    最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    这篇文章主要介绍了解决Vue 浏览器后退无法触发beforeRouteLeave的问题,需要的朋友可以参考下
    2017-12-12
  • vue+element ui实现锚点定位

    vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论