在vue中,下列代码的el-select为什么获取不到数据 <el-form-item label="专家姓名:" :label-width="formLabelWidth" prop="value"> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in form.options" :key="item.userId" :label="item.nickName" :value="item.userId"> </el-option> </el-select> </el-form-item>; form: { options:[], name: '', area: '', position: '', introduce: '', headUrl: '', url: null },
时间: 2024-02-14 10:18:25 浏览: 148
解决vue elementUI 使用el-select 时 change事件的触发问题
当你在 Vue 组件中使用 `el-select` 组件时,数据应该是从 `options` 这个数组中获取的。根据你提供的代码,你在 `el-select` 组件中使用了 `v-model` 指令来绑定一个名为 `value` 的变量,但是在你的 `form` 对象中并没有定义 `value` 这个属性。这可能是导致你无法获取数据的原因。
你应该将 `v-model="value"` 改为 `v-model="form.name"`,其中 `form.name` 对应的是 `name` 这个表单项。同时,你需要将 `prop="value"` 改为 `prop="name"`,以便在表单验证时使用正确的属性名。
修改后的代码如下:
```
<el-form-item label="专家姓名:" :label-width="formLabelWidth" prop="name">
<el-select v-model="form.name" placeholder="请选择">
<el-option
v-for="item in form.options"
:key="item.userId"
:label="item.nickName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
data() {
return {
form: {
options: [],
name: '',
area: '',
position: '',
introduce: '',
headUrl: '',
url: null
},
formLabelWidth: '80px'
}
}
```
这样修改之后,你应该就能够正确地获取到 `el-select` 中的数据了。
阅读全文