有一个表单:

<el-form :model="configForm">

</el-form>

如果configForm初始化为{},此对象是动态变化的,如果后面赋值时,这样

this.configForm[key1] = '';
this.configForm[key2] = '';
this.configForm[key3] = ''

vue是检测不到其变化的,vue只会检测到其本身值(对象数组为指针)变化,如果是对象,可以检测初始化对象中已存在的属性变化,而不会检测到新增的属性;

此时应该这样:

var configForm = {};
configForm[key1] = '';
configForm[key2] = '';
configForm[key3] = '';

this.configForm = configForm;

给this.configForm重新赋值,指针发生变化,vue会检测到

相关学习: http://es6.ruanyifeng.com/#docs/object#%E5%B1%9E%E6%80%A7%E5%90%8D%E8%A1%A8%E8%BE%BE%E5%BC%8F

vue中表单的动态绑定的更多相关文章

  1. 036——VUE中表单控件处理之动态绑定文章的属性的处理方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 037——VUE中表单控件处理之表单修饰符:lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 032——VUE中表单控件处理之复选框的处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue中表单校验

    1.安装校验插件vee-validate npm install vee-validate --save 2.在main.js中引用插件 // 表单校验 import VeeValidate, { V ...

  8. vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

随机推荐

  1. flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  2. Luogu P2590 [ZJOI2008]树的统计

    最近在学树剖,看到了这题就做了 [ZJOI2008]树的统计 思路 从题面可以知道,这题是树剖题(要求的和模板没什么区别呀喂 就是在普通的树剖上加了一个最大值 所以可以知道就是树剖+特殊的线段树 线段 ...

  3. DbUtils: JDBC Utility Component Examples翻译

    DbUtils:JDBC实用组件实例 这一页提供了一些展示如何使用DbUtils的示例. 基本用法 DbUtils是一个非常小的类库,因此浏览完所有类的javadoc不会花费很长时间.DbUtils的 ...

  4. flask之请求钩子

    from flask import Flask from flask import abort app = Flask(__name__) # 在第一次请求之前调用,可以在此方法内部做一些初始化操作 ...

  5. 【Win10分区教程】

    Win10怎么分区?如何为Win10硬盘分区? 注:本教程适用于Win7.Win8.Win8.1和Win10系 到了Windows10时代,TB级硬盘已经很普及了,那么在Win10系统下如何为这些大容 ...

  6. JAVAOOP I/O

    程序的主要任务就是操作数据,通过允许程序读取文件的内容或向文件写入数据,可以使程序应用更加广泛. I/O(input/output) 在不同操作系统之下,所占的字节数也不同,一般认为 8.1.1使用F ...

  7. 安装docker和更改docker镜像下载目录

    centos6.x系列: yum install http://mirrors.yun-idc.com/epel/6/i386/epel-release-6-8.noarch.rpm yum inst ...

  8. redis之哨兵(Sentinel)

    Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端都没有实现主从切换的功能. 而 ...

  9. Linux 用户 和 组 快速了解

    1用户 (Linux中“只有超级管理员”才有权限操作 用户 和组) 1.1添加用户 useradd 命令 例如 :useradd hly //添加了一个新账户 hly 用户添加后 会存放在一个文件中, ...

  10. 教你Zbrush 4R7怎样创建Z球

    随着CG行业的迅猛发展,就业门槛大幅度提高,对于从业人员要求就是要“又快又好”,作为一个模型师,常会碰到一天或两天完成一个全身角色的考题,而且还需要角度摆出造型,以前做这个的话,可能比较难,现在有了Z ...