Vue 下拉框值變動事件傳多個參數

在使用 Vue 進行開發時，下拉框值變動事件 @change 是很常用的。

其傳參一般分為兩種方式：默認傳參和自定義傳參。

默認傳參

@change 默認會傳選中項標識的參數，在傳參處不用定義，在方法中直接接受即可。

<template>
  <el-select v-model="value" placeholder="請選擇" @change="onChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
    methods: {
    	onChange(value) {
      	    console.log(value);
    	}
    }
</script>

此時控制台會打印下拉框選中項對應的標識值。

自定義傳參

我們經常會遇到需要下拉框傳遞多個參數的場景，這是需要自定義傳參方式。

<template>
	<div v-for="(item, index) in otherFeesList" :key="index" class="item">  
		<el-select v-model="value" placeholder="請選擇" @change="onChange($event, index)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
  		</el-select>
    	<el-input v-model="item.unit">
    </div>
</template>

<script>
    methods: {
    	onChange(value, index) {
	    console.log(value);
	    console.log(index);
    	}
    }
</script>

此時控制台會分別打印下拉框選中項對應的標識值和外部標簽中的序號值。