使用元素ui选择显示占位符值

Question

我在Vue中使用元素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
)