Application scenarios
When using the iview component library, use the select drop-down box to bind the on-change event, according to different business scenarios, you need to return the record of the value or label text.
on-change event returns label
The on-change time of the drop-down box. By default, the return value is the value. If you need to return the label text, you need to:
1) Add an attribute to the select tag : label-in-value="true"
2) Get the label in the corresponding event monitoring method
<Select v-model="formItem.courseId" :label-in-value="true" @on-change="showCourseName">
<Option v-for="item in courseList" :value="item.id" :key="item.id" >{
{
item.courseName }}</Option>
</Select>
methods：{
showCourseName(data){
if(data!=undefined){
this.formItem.courseName = data.label
}
}
}
on-change event returns value
As mentioned above, the value is returned by default. Here is an introduction, in the case of obtaining the label text value, obtaining the value value is actually very simple:
<Select v-model="formItem.courseId" :label-in-value="true" @on-change="showCourseName">
<Option v-for="item in courseList" :value="item.id" :key="item.id" >{
{
item.courseName }}</Option>
</Select>
methods：{
showCourseName(data){
if(data!=undefined){
this.formItem.courseName = data.value
}
}
}