使用元素ui select显示占位符值

Question

我在Vue中使用Element UI库
我有一组两个单选按钮，还有一个需要共享相同数据的下拉列表。然而，当用户选择其中一个单选按钮时，下拉列表将显示该值。

我的最终目标是让下拉列表显示占位符文本，当然，除非选择了下拉值。可能是一个观察者来检查是否选择了无线电，然后更新下拉列表？

<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>

Answer 1

下拉列表显示相同的值，因为您与其他select共享相同的模型。如果你想用selfLanguage上的逻辑进行一些计算，你可以有两个单独的模型(selfLanguage，selfLanguageOther(，然后定义一个计算变量来决定哪种语言将是最终的/选定的语言。

你可以用这样的东西。

const selfLanguage = computed(
() => language.primaryLanguage ?? language.selfLanguageOther
)