IViewコンポーネント選択ドロップダウンボックスの変更時イベントが値またはラベルを返します

アプリケーションシナリオ

iviewコンポーネントライブラリを使用する場合、選択ドロップダウンボックスを使用して変更時イベントをバインドします。さまざまなビジネスシナリオに従って、値またはラベルテキストのレコードを返す必要があります。

変更時のイベントはラベルを返します

ドロップダウンボックスの変更時。デフォルトでは、戻り値は値です。ラベルテキストを返す必要がある場合は、次のことを行う必要があります
。1）selectタグに属性を追加します：label-in-value = "true"
2）対応するイベントモニタリングメソッドでラベルを取得します。

<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
            }
          }
}

変更時のイベントの戻り値

上記のように、値はデフォルトで返されます。はじめに、ラベルテキスト値を取得する場合、値の取得は実際には非常に簡単です。

<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
            }
          }
}