vue实现v-model动态绑定变量的问题（带子对象的json）

Question

<template>
<el-input v-for="item in formKey" :key="item.value" v-model="form[item.value]"></el-input>
</template>

<script>

export default {
    name: 'Home',
    components: {

    },
    computed:{
    
    },
    data() {
        return {
            form:{
                name:'',
                nameObj:{
                    name:""
                }
            },
            formKey:[{
                value:'name',
            },{
                value:'nameObj.name'
            }]
        }
    }
}

</script>
大佬们，，请问下我这种绑定form这种格式nameObj下的name我的v-model应该怎么绑定，，我用nameObj.name不行要怎么才能动态

Answer 1

1,
v-for="item in formKey" :key="item.value" v-model="form[item.value]"

将form的key 的 初始值附上，这样才能实现响应式

formKey.map(v=>{
  this.$set(this.form,v.value,"")
})
记得要等这个map先执行完成，然后再渲染数据。
可以尝试一下。~~~~~~~

如果还有内嵌对象，判断是否以.号分割 ，然后进一步处理逻辑。
以此类推。。。
要点就是要给form的key 附上初始值~~~~~~~~~
formKey.map(v=>{
  if(v.value.split(".").length>1){
        console.log("说明有内嵌对象")
        this.$set(this.form,v.value,{})
        let arr = v.value.split(".")
        arr.map(v2 => {
           this.$set(this.form[v.value],v2,"")
        })
        //如果还有内嵌对象，则需要写一个递归方法处理，类似这个步骤就可以
  }else{
    this.$set(this.form,v.value,"")
  }
  
})

2,
v-for="item in formKey" :key="item.value" :ref="item.value"

获取值直接操作dom 提交的时候根据key匹配值 this.$refs[item.value].value

Answer 2

var form ={
                name:'',
                nameObj:{
                    name:""
                }
            };

(new Function('return form.'+'nameObj.name')())