How to get the value selected by el-select in vue

When using ElementUI's el-select component in Vue, we need to get the value selected by the user. There are many ways to obtain the selected value. Here we introduce several common methods.

Method 1: v-model

The simplest method is to use the v-model directive. v-model is bound to the el-select component and can automatically obtain the selected value.

<el-select v-model="selectedValue">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 selectedValue
data() {
  return {
    selectedValue: ''
  }
}

In this way, when the user changes the option, the value of selectedValue will be automatically updated to the value of the selected option.

Method 2: @change event

Another way to get the selected value is to listen to the @change event.

<el-select @change="handleChange">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 handleChange 方法
methods: {
  handleChange(val) {
    console.log('选中的值是', val);
  }
}

When the user changes the option, the selected value will be passed as a parameter to the handleChange method and printed out.

Method 3: ref

We can also use ref to obtain the el-select component instance, and then obtain the selected value through the method in the instance.

<template>
  <div>
    <el-select ref="mySelect">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-button type="primary" @click="handleClick">获取选中值</el-button>
  </div>
</template>

// 在 Vue 实例中定义 handleClick 方法
methods: {
  handleClick() {
    const selectValue = this.$refs.mySelect.getSelectedValue();
    console.log('选中的值是', selectValue);
  }
}

In the handleClick method, we refer to the instance through this.$refs, and then use the method getSelectedValue() to get the selected value.

Method 4: v-bind binding value

The last method is to use the v-bind instruction to bind the selected value to a variable of the parent component, thereby obtaining the selected value.

<el-select v-bind:value="selectedValue" @change="handleChange">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 selectedValue 和 handleChange 方法
data() {
  return {
    selectedValue: ''
  }
},
methods: {
  handleChange(val) {
    this.selectedValue = val;
    console.log('选中的值是', this.selectedValue);
  }
}

In this way, we bind the selected value to the selectedValue variable, and then update the value of selectedValue in the handleChange method and print it out.

Summary

The above methods can all obtain the selected el-select value. Which method to use depends on your specific needs. No matter which method is used, the value selected by el-select can be easily obtained in Vue to implement various interactive functions.

The above is the detailed content of How to get the value selected by el-select in vue. For more information, please follow other related articles on the PHP Chinese website!