Vue drop-down box value change event to pass multiple parameters

Vue drop-down box value change event to pass multiple parameters

In useVueWhen developing, the drop-down box value change event@changeIt is very commonly used.

There are generally two ways to transfer ginseng:

• Default parameter transfer
• Customize parameter transfer

Default parameter transfer

@changeBy default, the parameters identified by the selected item will be passed. There is no need to define them at the transmission parameter, and it can be accepted directly in the method.

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

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

At this time, the console will print the identification value corresponding to the selected item in the drop-down box.

Customize parameter transfer

We often encounter scenarios where multiple parameters need to be passed by the drop-down box, which requires customization of the parameter transfer method.

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

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

At this time, the console will print the identification value corresponding to the drop-down box selection and the serial number value in the external label respectively.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.