Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

195
Visualizações
Show placeholder value using element ui select

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>
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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
)
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda