如何循环绑定el-form-item上的v-mode
时间: 2024-12-19 11:14:10 浏览: 3
在Vue.js中,如果你想在`el-form-item`上循环绑定`v-model`,通常你会这样做:
首先,假设你有一个数组`formItems`,包含了你需要绑定到表单元素的数据,每个数据项都有一个对应的字段名(用于生成`v-model`)。你可以创建一个模板循环,比如用`v-for`:
```html
<template>
<el-form :model="formData">
<el-row v-for="(item, index) in formItems" :key="index">
<el-col :span="6">
<el-form-item label="Field {{ item.label }}">{{ item.fieldName }}</el-form-item>
<!-- 这里使用动态绑定v-model -->
<input type="text" v-model="formData[item.fieldName]" placeholder="请输入内容">
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {}, // 初始化一个空的对象,用于存储表单数据
formItems: [
{ label: '姓名', fieldName: 'name' },
{ label: '年龄', fieldName: 'age' },
... // 更多数据项
]
};
}
};
</script>
```
在这个例子中,`v-model`会根据`formItems`数组中的`fieldName`属性来动态关联到`formData`对象相应字段。
阅读全文