vue给v-model动态绑定变量的问题

先说下需求，领导想做一个问卷调查的页面为了可以重复使用需要动态根据后台的数据动态判断当前位置该使用input、textarea、复选框、还是单选框，后台的数据结构大概是这样的(下面是我自己模拟的)

data: [
        {label:'姓名',type:'text',max: 50,required:'true'},
        {label:'电话',type:'phone',max: 50,required:'true'},
        {label:'邮箱',type:'email',max: 50,required:'false'},
        {label:'数字',type:'number',max: 50,required:'false'},
        {label:"多选",type:'checkbox',max: 50,required:'true',data:["上网","旅游","篮球","跑步"]},
        {label:'单选',type:'radio',max: 50,required:'true',data:["男","女"]},
        {label:'问题1：',type:'textarea',max: 50,required:'true'},
        {label:'问题2：',type:'textarea',max: 50,required:'true'},
        {label:'问题3：',type:'textarea',max: 50,required:'true'},
        {label:'问题4：',type:'textarea',max: 50,required:'true'},
        {label:'问题5：',type:'textarea',max: 50,required:'true'},
    ]

要根据数据中的type来判断使用input的类型。
页面代码

<div id="app">
        <div v-for="(item,index) in data">
            <p>{{item.label}}</p>
            <input v-if="item.type == 'text' || item.type == 'number' || item.type == 'email' || item.type == 'phone'" type="text"  />
            <textarea v-else-if="item.type == 'textarea'" name="" id="" cols="30" rows="10"></textarea>
            <div v-else-if="item.type =='checkbox'">
                <label v-for="(ck,index) in item.data" :for="ck">{{ck}}<input :value="ck" v-model="checkbox" type="checkbox" /></label>
            </div>
            <div v-else-if="item.type =='radio'">
                <label v-for="(rd,index) in item.data" :for="rd">{{rd}}<input :value="rd" :value="rd" v-model="radio" name="sex" type="radio" /></label>
            </div>
        </div>
        <button>提交</button>
    </div>

效果如下(略丑，没加样式)

1.png

可以看出页面输出是没问题的。
以前input都是一个一个写出来，现在都是循环出来的，问题来了怎么给v-model动态绑上不同的变量。刚开始我是这样做的。
我把数据中type对应的类型和vue的data中的变量对应上，这样循环的时候直接把每条数据的type给到v-model，操作：

<div id="app">
        <div v-for="(item,index) in data">
            <p>{{item.label}}</p>
            <input v-if="item.type == 'text' || item.type == 'number' || item.type == 'email' || item.type == 'phone'" type="text" v-model="item.type" /><!--在这把item.type给到v-model-->
            <textarea v-else-if="item.type == 'textarea'" name="" id="" cols="30" rows="10"></textarea>
            <div v-else-if="item.type =='checkbox'">
                <label v-for="(ck,index) in item.data" :for="ck">{{ck}}<input :value="ck" v-model="checkbox" type="checkbox" /></label>
            </div>
            <div v-else-if="item.type =='radio'">
                <label v-for="(rd,index) in item.data" :for="rd">{{rd}}<input :value="rd" :value="rd" v-model="radio" name="sex" type="radio" /></label>
            </div>
        </div>
        <button>提交</button>
    </div>

js中

var vm = new Vue({
    el:"#app",
    data:{
        text: "",
        phone: "",
        email: "",
        number: "",
        checkbox:[],
        radio:"",
        data: data//数据在外部定义了
    }
})

结果事与愿违啊！！

2.png

直接作为字符串展示了。
测试了几波终于找了一个可行的方法(希望有大佬可以提供一些好的方法)
先看js

var vm = new Vue({
    el:"#app",
    data:{
        perInfo: {
            text: "",
            phone: "",
            email: "",
            number: "",
        },
        checkbox:[],
        radio:"",
        data: datas.data
    }
})

将展示input的数据都放到一个对象中，页面修改

<div id="app">
        <div v-for="(item,index) in data">
            <p>{{item.label}}</p>
            <input v-if="item.type == 'text' || item.type == 'number' || item.type == 'email' || item.type == 'phone'" type="text"  v-model="perInfo[item.type]"/>
            <textarea v-else-if="item.type == 'textarea'" name="" id="" cols="30" rows="10"></textarea>
            <div v-else-if="item.type =='checkbox'">
                <label v-for="(ck,index) in item.data" :for="ck">{{ck}}<input :value="ck" v-model="checkbox" type="checkbox" /></label>
            </div>
            <div v-else-if="item.type =='radio'">
                <label v-for="(rd,index) in item.data" :for="rd">{{rd}}<input :value="rd" :value="rd" v-model="radio" name="sex" type="radio" /></label>
            </div>
        </div>
        <button>提交</button>
    </div>

查看页面发现正常了

3.png

我们再写个提交方法看下能不能取到值

//js中的methods中添加一个submit方法
methods: {
        submit(){
            console.log(this.perInfo)
        }
    }
//button中添加该方法
<button @click="submit">提交</button>

4.png

可以取到问题解决。