el-form-item中prop属性怎样与嵌套的el-input绑定的新声明的变量联系
时间: 2024-05-01 12:20:57 浏览: 78
在使用 `el-form` 和 `el-form-item` 组件时,`prop` 属性指定了表单域对应的数据项的属性名。如果需要把 `el-form-item` 中的 `el-input` 组件的值与新声明的变量联系起来,可以通过 `v-model` 指令来实现。
具体步骤如下:
1. 在 `el-form` 中声明一个数据对象,用于存储表单中各个表单域的数据值。
2. 在 `el-form-item` 中使用 `prop` 属性指定表单域对应的数据项的属性名,例如:
```html
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
```
3. 在组件的 `data` 选项中声明一个与 `el-form` 中的数据对象属性名相同的变量,并将其初始化为空,例如:
```javascript
data() {
return {
formData: {
username: '',
// 其他表单域对应的数据项
},
// 新声明的变量
newVar: ''
}
}
```
4. 将 `el-input` 组件的值与新声明的变量绑定,例如:
```html
<el-form-item label="新变量" prop="newVar">
<el-input v-model="newVar"></el-input>
</el-form-item>
```
这样就可以实现 `el-form-item` 中的表单域与新声明的变量之间的联系。当表单域的值发生改变时,`el-form` 中的数据对象的相应属性值也会自动更新;同时,新声明的变量的值也会随着 `el-input` 组件的值的变化而变化。
阅读全文