vue通过for循环生成input框后双向绑定失效问题

有些时候页面上有太多的表单元素，一个个的写太过繁琐，拿 input 框举例，众多的 input 框，无非就是输入框前的说明和 input 框的 name 属性不一样

<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="formInline.name1" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <!-- 当然，这里的性别应该下拉框，这里只做演示 -->
        <el-form-item label="性别">
            <el-input v-model="formInline.sex1" placeholder="请选择性别"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="formInline.age1" placeholder="请输入年龄"></el-input>
        </el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12

既然这样，何不弄一个数组，通过 for 循环遍历出来，岂不是更省事？经过一番尝试，终于成功，特此记录，便于后续回顾及帮助到有需要的人。

1、通过 for 循环批量生成表单元素

模拟如下数据：

export default {
    name: 'BasicInfo',
    components: {},
    data() {
        return {
            formInline: {
            },
            formData: [
                {"id":"1","label":"姓名","tableColumn":"name","placeholder":""},
                {"id":"2","label":"性别","tableColumn":"sex","placeholder":"请选择性别"},
                {"id":"3","label":"年龄","tableColumn":"age","placeholder":"请输入年龄"}
            ]
        }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面也改成 v-for 来遍历

<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
	<el-form-item 
	    v-for="item in formData" 
	    :index="item.id" 
	    :key="item.id" 
	    :label="item.label"
	>
	    <el-input 
	    v-model="item.tableColumn" 
	    :placeholder="item.placeholder"
	    ></el-input>
	</el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13

2、发现呈现的效果与预期的不符合

参考了几篇网友的解答
vue.js中 v-for 下的v-model 双向绑定失效的解决方法
v-for渲染input的坑！！！vue中v-for出来的input如何实现双向绑定
vue for循环v-model双向绑定对象/数组失效

后面自己试了下，改了下 v-bind 处的写法后，就可以了

3、修改 v-bind 处的写法

<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
	<el-form-item 
	    v-for="item in formData" 
	    :index="item.id" 
	    :key="item.id" 
	    :label="item.label"
	>
	    <el-input 
	    v-model="formInline[item.tableColumn]" 
	    :placeholder="item.placeholder"
	    ></el-input>
	</el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13

4、最终效果与预期一致：

借助 Vue 开发工具可以看到，已经实现了双向绑定

5、探索其他问题

看了前面几篇博客，有的往 标签里动态绑定了一个 prop 属性，刚开始不清楚啥意思，看了下文档说用于表单校验和重置表单的

于是就做了下测试：

<el-form-item 
            v-for="item in formData" 
            :index="item.id" 
            :key="item.id" 
            :label="item.label"
            :prop="item.tableColumn"
            :required="item.required"
            inline-message="true"
            :rules="{ required: true, message: `${item.label}不能为空`}"
        >
        <!-- :rules="[
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'},
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]" -->
            <el-input 
            v-model="formInline[item.tableColumn]" 
            :placeholder="item.placeholder"
            
            ></el-input>
 </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果证实了

6、绑定 prop 属性后浏览器会有莫名其妙的红色警告问题

此问题参考了这篇文章：
The label’s for attribute doesn’t match any element id…的解决办法

打开浏览器开发者工具，可以看到，vue文件里的 最终被解析成了 , 的使用需要在 input 框中指定 id 属性

于是指定了一个 id 属性，再看控制台，警告消失

<el-input 
	v-model="formInline[item.tableColumn]" 
	:placeholder="item.placeholder"
	:id="item.tableColumn"
></el-input>
1
2
3
4
5

The End！感谢参考的这几篇文章的作者，正是因为有你们的分享，像我这样的小白遇到问题时才得已解决，所以我也向你们学习，将遇到的问题记录下来，以加深印象，也能让需要的人得到参考！
由于时间有限，此例子可以做得更好，比如：动态实现下拉框、多选等…，类似代码生成器那种，有时间了琢磨下后再记录！