I'm using Element UI library in Vue.
I have a set of two radio buttons, and also a dropdown list that need to share the same data. I have everything working as expected however when the user selects one of the radio buttons the dropdown is displaying that value.
My end goal is to have the dropdown display the placeholder text unless of course a dropdown value is selected. Possibly a watcher to check if radios are selected and then update dropdown?
<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>
The dropdown shows the same value because you share the same model as other select. If you want to do some computation with a logic over selfLanguage you can have two separata models (selflanguage , selfLanguageOther) and then define a computed variable to decide which language is going to be final/selected one.
You can use something like this.
const selfLanguage = computed(
() => language.primaryLanguage ?? language.selfLanguageOther
)