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

Posted 2023-02-22

【中文标题】使用元素 ui 选择显示占位符值

【英文标题】：Show placeholder value using element ui select

【发布时间】：2022-01-19 22:34:57

【问题描述】：

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

【问题讨论】：

我仍然不确定您是否想在 selfLanguage 上使用多个值或单个值。如果是这样，为什么它们都不在 radio 或 select 中。

【参考方案1】：

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

你可以使用这样的东西。

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