vue中表单的动态绑定
有一个表单:
<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中表单的动态绑定的更多相关文章
- 036——VUE中表单控件处理之动态绑定文章的属性的处理方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 037——VUE中表单控件处理之表单修饰符:lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 032——VUE中表单控件处理之复选框的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中表单校验
1.安装校验插件vee-validate npm install vee-validate --save 2.在main.js中引用插件 // 表单校验 import VeeValidate, { V ...
- vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
随机推荐
- 动态规划(二)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 ...
- chromium之revocable_store
// |RevocableStore| is a container of items that can be removed from the store. Revoke: 撤销 Revocable ...
- datatable根据条件设置表格行中字的颜色或背景
使用row回调函数 "rowCallback": function (row, data) { if (xxx) { //给行添加背景色 $(row).css("back ...
- 剑指offer—从头到尾打印链表
输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 递归添加...不为空就加 import java.util.ArrayList; public class Solution { pu ...
- 【c学习-8】
/*继承结构体*/ #include // 定义子结构体 struct date{ int year; int month; int day; }; //定义父结构体 struct student{ ...
- ThinkPHP框架目录的介绍
library目录 Think目录 mvc
- python内置常用高阶函数(列出了5个常用的)
原文使用的是python2,现修改为python3,全部都实际输出过,可以运行. 引用自:http://www.cnblogs.com/duyaya/p/8562898.html https://bl ...
- go web处理上传
要使表单能够上传文件,第一步就是添加form的enctype属性,enctype属性有如下三种情况: application/x-www-form-urlencoded 表示在发送前编码所有字符(默认 ...
- 洛谷U32670 小凯的数字(比赛)
题目网址 https://www.luogu.org/problemnew/show/U32670 题目背景 NOIP2018 原创模拟题T1 NOIP DAY1 T1 or DAY 2 T1 难度 ...
- Windows Store App下代码加载page resource和resw文件里的string
加载page resource 在page的code behind里: this.Resources["textBoxStyle"] 加载resw文件里的string: Resou ...