Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

191
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!