Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

192
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda