vue-select下拉选择框-输出框中的内容而不是对应的值
项目场景:一个下拉选择框,有的时候后端需要我们传的参数除了有选中内容对应的value,还需要选中的内容本身,但是v-model绑定的通常是选中内容对应的value解决方案:首先来看一下一个普通的下拉选择框的结构,和绑定的list的结构<el-selectv-model="value"placeholder="请选择"><el-optionv-for="(item, i) in l
·
项目场景:
一个下拉选择框,有的时候后端需要我们传的参数除了有选中内容对应的value,还需要选中的内容本身,但是v-model绑定的通常是选中内容对应的value
解决方案:
首先来看一下一个普通的下拉选择框的结构,和绑定的list的结构
<el-select
v-model="value"
placeholder="请选择"
>
<el-option
v-for="(item, i) in list"
:key="i"
:label="item.label"
:value="item.value"
/>
</el-select>
list:[
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
}
]
如果选中第一个
此时:console.log(value) 会得到 ‘选项1’
只要给select加一个 ref=“value” ,就可以用this.$refs.value.selected.label 得到 ‘黄金糕’
<el-select
ref="value"
v-model="value"
placeholder="请选择"
>
<el-option
v-for="(item, i) in list"
:key="i"
:label="item.label"
:value="item.value"
/>
</el-select>
更多推荐
已为社区贡献4条内容
所有评论(0)