哈哈
先来张图,看看问题:
输入框的实现是用v-for
。可以很清楚的看到问题,我不管在哪个输入框输入,都监听的是一样的值。其实现代码如下:
<x-input v-for="(v, k) in title" :title="v" :key="k" v-model="contract.k"></x-input>
其中title
和contract
的数据结构是:
contract: {
contract_num: "",
tax_payer: "",
company_name: "",
legal_person: "",
principal_person: "",
principal_person_phone: "",
company_addr: "",
contract_date: "",
expiry_time: "",
purcha_num: "",
legal_person_phone: ""
},
title: {
contract_num: "合同号:",
tax_payer: "纳税人识别号:",
company_name: "公司名:",
legal_person: "法人:",
principal_person: "负责人:",
principal_person_phone: "负责人电话:",
company_addr: "公司地址:",
contract_date: "合同日期:",
expiry_time: "合同有效期:",
purcha_num: "购买设备数量:",
legal_person_phone: "法人联系方式:"
}
想了想,是什么原因呢?不太明白。再一想,Object
引用的方式有两种,分别为:
// 用title作为例子
title.contract_num == "合同号" // true
title[contract_num] == "合同号" // 还是true
所以就改了一下方式,还别说,成功了。代码如下:
<x-input v-for="(v, k) in title" :title="v" :key="k" v-model="contract[k]"></x-input>
好奇之下问百度,得到了如下解释:
js对象属性 通过点(.) 和 方括号([ ]) 的不同之处
- [ ]–可以用变量作为属性名或访问,而点方法不可以;
- [ ]中括号法–可以用数字作为属性名,而点语法不可以;
- [] 可以动态访问的属性名,可以在程序运行时创建和修改属性,点操作符就不行!
- [] 如果属性名中包含会导致语法错误的字符,或者属性名是关键字或者保留字,也可以使用方括号表示法。
所以,本例中刚好犯了第三条。半路出家,JavaScript基础还是不牢固。