普通循环绑定表单属性
没有问题，因为在组件实例化完成前，Vue.js已经对data函数中的属性进行了响应式处理
<div v-for="(item, index) in form" :key="index">
<input v-model="form[index]" />
</div>
data(){
return {
form:{
name: 'tom',
age: 10,
city: 'New York'
}
}
},
for循环动态绑定表单属性
当需要双向绑定表单的属性来自于请求接口的数据时，由于组件实例化在created阶段已经完成，绑定的属性响应式无效；
$set向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新
<el-form>
<el-form-item
v-for="(it, idx) of dynamicList"
:key="idx"
:label="it.label"
>
<el-input v-model="form[it.key]"></el-input>
</el-form-item>
</el-form>
data(){
return {
form:{},
dynamicList: [],
}
},
watch:{
dynamicList(){
this.dynamicList.map(it=>{
// 若在watch中侦测dynamicList，数据异步请求接口回来的，实例化已经完成，赋值响应式无效
// this.form[it.key] = '0';
this.$set(this.form, it.key, '0');
})
}
},
created() {
setTimeout(() => {
// axios在created发起异步请求获取form对象动态属性
let res = [
{ label: "姓名", key: "name" },
{ label: "年龄", key: "age" },
{ label: "城市", key: "city" },
];
this.dynamicList = res;
this.dynamicList.map(it=>{
// 组件实例在created已完成，此处赋值，数据响应式无效
// this.form[it.key] = '0';
this.$set(this.form, it.key, '0');
})
}, 1000);
}
