Comment obtenir la valeur sélectionnée par el-select dans vue

Lors de l'utilisation du composant el-select d'ElementUI dans Vue, nous devons obtenir la valeur sélectionnée par l'utilisateur. Il existe de nombreuses façons d'obtenir la valeur sélectionnée. Nous présentons ici plusieurs méthodes courantes.

Méthode 1 : v-model

Le moyen le plus simple est d'utiliser la commande v-model. v-model est lié au composant el-select et peut obtenir automatiquement la valeur sélectionnée.

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

De cette façon, lorsque l'utilisateur modifie l'option, la valeur de selectedValue sera automatiquement mise à jour avec la valeur de l'option sélectionnée.

Méthode 2 : événement @change

Une autre façon d'obtenir la valeur sélectionnée est d'écouter l'événement @change.

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

Lorsque l'utilisateur modifie l'option, la valeur sélectionnée sera transmise en tant que paramètre à la méthode handleChange et imprimée.

Méthode 3 : ref

Nous pouvons également utiliser ref pour obtenir l'instance du composant el-select, puis obtenir la valeur sélectionnée via la méthode dans l'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);
  }
}

Dans la méthode handleClick, nous faisons référence à l'instance via this.$refs, puis utilisons la méthode getSelectedValue() pour obtenir la valeur sélectionnée.

Méthode 4 : valeur de liaison v-bind

La dernière méthode consiste à utiliser l'instruction v-bind pour lier la valeur sélectionnée à une variable du composant parent afin d'obtenir la valeur sélectionnée.

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

De cette façon, nous lions la valeur sélectionnée à la variable selectedValue, puis mettons à jour la valeur de selectedValue dans la méthode handleChange et l'imprimons.

Résumé

Les méthodes ci-dessus peuvent toutes obtenir la valeur el-select sélectionnée. La méthode à utiliser dépend de vos besoins spécifiques. Quelle que soit la méthode utilisée, la valeur sélectionnée par el-select peut être facilement obtenue dans Vue pour implémenter diverses fonctions interactives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!