Estoy usando la biblioteca Element UI en Vue.
Tengo un conjunto de dos botones de radio y también una lista desplegable que necesita compartir los mismos datos. Tengo todo funcionando como se esperaba, sin embargo, cuando el usuario selecciona uno de los botones de opción, el menú desplegable muestra ese valor.
Mi objetivo final es que el menú desplegable muestre el texto del marcador de posición a menos que, por supuesto, se seleccione un valor desplegable. ¿Posiblemente un observador para verificar si las radios están seleccionadas y luego actualizar el menú desplegable?
<template> <div> <el-radio-group ref="selfLanguage" v-model="formData.selfLanguage"> <ol> <li class="radio-list-item"> <el-radio id="selfLanguageEnglish" label="English" name="selfLanguage" class="radio--bold" /> </li> <li class="radio-list-item"> <el-radio id="selfLanguageSpanish" label="Spanish" name="selfLanguage" class="radio--bold" /> </li> </ol> </el-radio-group> <el-form-item prop="selfLanguage" :show-message="false" class="form-item--select el-form-item--dropdown" > <label for="selfLanguage" class="font--primary title-3 font--bold mb-6"> Other </label> <el-select ref="selfLanguageDropdown" v-model="formData.selfLanguage" name="selfLanguage" class="select-box" prop="selfLanguageOther" placeholder="Please select one" :popper-append-to-body="false" > <el-option label="French" value="french"></el-option> <el-option label="Russian" value="russian"></el-option> <el-option label="Italian" value="italian"></el-option> </el-select> </el-form-item> </div> </template> <script> export default { watch: { 'formData.selfLanguage'(newVal, oldVal) { if (newVal === 'English' || newVal === 'Spanish') { // possibly reset the dropdown or have it display the placeholder text rather than data value } }, }, } </script>El menú desplegable muestra el mismo valor porque comparte el mismo modelo que otra selección. Si desea realizar algún cálculo con una lógica sobre selfLanguage, puede tener dos modelos separados (selflanguage , selfLanguageOther) y luego definir una variable calculada para decidir qué idioma será el final/seleccionado.
Puedes usar algo como esto.
const selfLanguage = computed( () => language.primaryLanguage ?? language.selfLanguageOther )