vue for循环v-model双向绑定对象/数组失效

普通循环绑定对象属性

是没有问题的，因为在组件实例化完成前，Vue.js已经对data函数中的属性进行了响应式处理

<div v-for="(value, key) in form" :key="key">
      <input v-model="form[key]" :placeholder="key" />
</div>

data(){
    return {
      form:{
         name: 'tom', 
         age: 10,
         city: 'New York'
      }
    }
},

循环绑定对象动态的属性

官网：$set向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新

<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>

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);
}

循环绑定 动态的数组属性