Maison >interface Web >Questions et réponses frontales >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!