How to automatically select the first option in a dropdown menu in Vue 3

user_3479566 0
Viewed 144

I have 2 dropdown menus, the second one changes values depending on the selection of the first dropdown.

All I want to do is set the first value of the second dropdown to be selected by default no matter what the option in the first dropdown is.

At the moment, the default selection of the second dropdown is always empty.

I tried fetching the values from types and loading them via v-for on the option tag and setting :selected="index===0" but it didn't work either.

Demo: https://codesandbox.io/s/relaxed-flower-2hjox1?file=/src/App.vue

The Template

<div class="col-md-6">
  <label for="type" class="form-label">Type</label>
  <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
  </select>
</div>
<div class="col-md-6">
  <label for="selected" class="form-label">Option 2</label>
  <div v-if="form.type === 'en-GB'">
      <select id="selected" name="selected" class="form-select" v-model="form.selected">
          <option value="Arsenal">Arsenal</option>
          <option value="Chelsea">Chelsea</option>
          <option value="Liverpool">Liverpool</option>
      </select>
  </div>
  <div v-else-if="form.type === 'en-US'">
      <select id="selected" name="selected" class="form-select" v-model="form.selected">
          <option value="Lakers">Lakers</option>
          <option value="Bulls">Bulls</option>
          <option value="Mavericks">Mavericks</option>
      </select>
  </div>
</div>

Javascript

export default {
  name: "App",
  data() {
    return {
      form: {
        type: 'en-GB',
        selected: ''
      },
      types: {
        american: ['Lakers', 'Bulls', 'Mavericks'],
        british: ['Arsenal', 'Liverpool', 'Chelsea']
      }
    }
  },
};
vuejs3 inertiajs vue.js drop-down-menu javascript
2 Answers

const app = Vue.createApp({
  data() {
    return {
      form: {
        type: "en-GB",
        selected: "",
      },
      types: {
        american: ["Lakers", "Bulls", "Mavericks"],
        british: ["Arsenal", "Liverpool", "Chelsea"],
      },
    };
  },
  watch: {
    'form.type': {
      handler() {
        this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
      },
      immediate: true
    }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="col-md-6">
    <label for="type" class="form-label">Type</label>
    <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="selected" class="form-label">Option 2</label>
    <div v-if="form.type === 'en-GB'">
      <select
        id="selected"
        name="selected"
        class="form-select"
        v-model="form.selected"
      >
        <option value="Arsenal">Arsenal</option>
        <option value="Chelsea">Chelsea</option>
        <option value="Liverpool">Liverpool</option>
      </select>
    </div>
    <div v-else-if="form.type === 'en-US'">
      <select
        id="selected"
        name="selected"
        class="form-select"
        v-model="form.selected"
      >
        <option value="Lakers">Lakers</option>
        <option value="Bulls">Bulls</option>
        <option value="Mavericks">Mavericks</option>
      </select>
    </div>
  </div>
</div>

You can create watcher and set default values for second select:

watch: {
  'form.type': {
    handler() {
      this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
    },
    immediate: true
  }
}
user_119891890

All I want to do is set the first value of the second dropdown to be selected by default no matter what the option in the first dropdown is.

Add a watcher, which watches form.type, then pick the first item from types

Note, I've changed american key to the key your using for type, then you can loop over the options, if you don't have that in place you'll need mapping object anyway typeMap: {'en-US': 'american', 'en-GB': 'british' } ... types[typeMap[form.type]]

new Vue({
  el: '#app',
  data() {
    return {
      form: {
        type: 'en-GB',
        selected: ''
      },
      types: {
        'en-US': ['Lakers', 'Bulls', 'Mavericks'],
        'en-GB': ['Arsenal', 'Liverpool', 'Chelsea']
      }
    }
  },
  watch: {
    'form.type' () {
      this.form.selected = this.types[this.form.type][0]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="col-md-6">
    <label for="type" class="form-label">Type</label>
    <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="selected" class="form-label">Option 2</label>
    <select id="selected" name="selected" class="form-select" v-model="form.selected">
      <option v-for="name in types[form.type]">{{ name }}</option>
    </select>
  </div>
</div>

user_6618720
Related