初始化参数
javascript
return {
fields: [
{"title":"景区","id":0},
{"title":"酒店","id":1}
],
evaluates: [
{"title":"好评","id":0},
{"title":"中评","id":1},
{"title":"差评","id":2}
],
}
html
<el-form-item label="评价" prop="appraise">
<el-select v-model="form.appraise" placeholder="请选择">
<el-option
v-for="evaluate in evaluates"
:key="evaluate.id"
:label="evaluate.title"
:value="evaluate.id"
clearable
>
{{ evaluate.title }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分类" prop="classification">
<el-select v-model="form.classification" placeholder="请选择">
<el-option
v-for="item in fields"
:key="item.id"
:label="item.title"
:value="item.id"
clearable
>
{{ item.title }}
</el-option>
</el-select>
</el-form-item>
后端传送数据给前端后,下拉框回显结果为数字!
最近遇到个问题后端返回结果后.前端双向绑定回显结果为数字.分析原因后发现是数据类型不一致导致回显异常
解决方案
把option的value转为字符类型即可
|---|---------------------------------|
| 1 | :value="evaluate.id+''"
|
html
<el-form-item label="评价" prop="appraise">
<el-select v-model="form.appraise" placeholder="请选择">
<el-option
v-for="evaluate in evaluates"
:key="evaluate.id"
:label="evaluate.title"
:value="evaluate.id+''"
clearable
>
{{ evaluate.title }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分类" prop="classification">
<el-select v-model="form.classification" placeholder="请选择">
<el-option
v-for="item in fields"
:key="item.id"
:label="item.title"
:value="item.id+''"
clearable
>
{{ item.title }}
</el-option>
</el-select>
</el-form-item>