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

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 >
  <label for="type" >Type</label>
  <select id="type"  v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
  </select>
</div>
<div >
  <label for="selected" >Option 2</label>
  <div v-if="form.type === 'en-GB'">
      <select id="selected" name="selected"  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"  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']
      }
    }
  },
};

CodePudding user response：

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 >
    <label for="type" >Type</label>
    <select id="type"  v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div >
    <label for="selected" >Option 2</label>
    <div v-if="form.type === 'en-GB'">
      <select
        id="selected"
        name="selected"
        
        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"
        
        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
  }
}

CodePudding user response：

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 >
    <label for="type" >Type</label>
    <select id="type"  v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div >
    <label for="selected" >Option 2</label>
    <select id="selected" name="selected"  v-model="form.selected">
      <option v-for="name in types[form.type]">{{ name }}</option>
    </select>
  </div>
</div>