[vue2 event parameter passing 1] Custom parameters: In the change event of elementui, the method of passing custom parameters

1. Question:

        In the development process of elementUI, sometimes we often encounter that we want to pass some customized data in the defined change event. How should we solve this problem?

2. Solution:

1. Change event of select tag

                Normal situation : The currently selected value is returned by default.

                Special case : What if you want to pass the custom parameter index? You need to use $event to get the default value, and then pass the custom parameters later.

                Note: [The $event refers to what event is currently triggered (mouse event, keyboard event, etc.)]

2. Change event in InputNumber counter

                Normal situation: NewValue and oldValue are returned by default.

                Special case: What if you want to pass the custom parameter index? You need to use arrow functions to work around it and realize the transfer of custom parameters.

3. Specific cases:

Case 1. Change event of select tag

        【Prepare data】

         Define the data in the select tag options in data as the options array. The data format is as follows:

data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }

        【normal circumstances】

        Use the select tag in the <template> template to display the drop-down options, and bind the change event to selectedItem. code show as below:

<el-select v-model="value" placeholder="请选择" @change="selectedItem">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

        In the methods method, define the selectedItem method to respond to the label change event. code show as below:

    selectedItem(e){
      console.log("你选择了：",e)
    },

        The page effect is:

 Of course, you can also pass it directly in object form. The specific changes to the code are as follows:

         【Special cases】

        Pass custom parameters. Taking the above data as an example, if you want to pass a custom index value at the same time, how should you do it?

        1. Change the writing method of the binding event in the label event:

         2. Change the number of parameters passed in the binding event:

         The output is:

 

<>Case 2, change event in InputNumber counter

        【normal circumstances】

         Page effect:

        【Special cases】

 Page effect: