有一个表单:

<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. 动态规划(二)HDU1114

    1.题目来源HDU1114 Sample Input 3 10 110 2 1 1 30 50 10 110 2 1 1 50 30 1 6 2 10 3 20 4 Sample Output The ...

  2. chromium之revocable_store

    // |RevocableStore| is a container of items that can be removed from the store. Revoke: 撤销 Revocable ...

  3. datatable根据条件设置表格行中字的颜色或背景

    使用row回调函数 "rowCallback": function (row, data) { if (xxx) { //给行添加背景色 $(row).css("back ...

  4. 剑指offer—从头到尾打印链表

    输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 递归添加...不为空就加 import java.util.ArrayList; public class Solution { pu ...

  5. 【c学习-8】

    /*继承结构体*/ #include // 定义子结构体 struct date{ int year; int month; int day; }; //定义父结构体 struct student{ ...

  6. ThinkPHP框架目录的介绍

    library目录 Think目录 mvc

  7. python内置常用高阶函数(列出了5个常用的)

    原文使用的是python2,现修改为python3,全部都实际输出过,可以运行. 引用自:http://www.cnblogs.com/duyaya/p/8562898.html https://bl ...

  8. go web处理上传

    要使表单能够上传文件,第一步就是添加form的enctype属性,enctype属性有如下三种情况: application/x-www-form-urlencoded 表示在发送前编码所有字符(默认 ...

  9. 洛谷U32670 小凯的数字(比赛)

    题目网址 https://www.luogu.org/problemnew/show/U32670 题目背景 NOIP2018 原创模拟题T1 NOIP DAY1 T1 or DAY 2 T1 难度 ...

  10. Windows Store App下代码加载page resource和resw文件里的string

    加载page resource 在page的code behind里: this.Resources["textBoxStyle"] 加载resw文件里的string: Resou ...