How to conditionally load select options based on another select value

Question

<select v-model="dessert">
  <option>Ice Cream</option>
  <option>Cake</option>
  <option>Pie</option>
</select>

<select v-model="flavor">
  // options should depend on selected dessert
</select>

The goal is to choose a first option, then have a secondary select box appear with options based on the chosen first option.

Answer 1

I hope this helps!

   <select v-model="dessert" @change="dessertChanged">
       <option>Ice Cream</option>
       <option>Cake</option>
       <option>Pie</option>
    </select>

<select v-model="flavor">
  <option v-for="flavor in flavors" :key="flavor.value" :value="flavor.value"> 
    {{flavor.value}}</option>
</select>

<script>
    data:{
        flavours:[],
        dessert:''
    },
    methods:{
           dessertChanged:function(){
              if(this.dessert == 'ice cream'){
                 this.flavours = [{ value:'Vanilla'},{value:'butter scotch'}];
              }
              else if(this.dessert == 'cake'){
                 this.flavours = [{ value:'fruit cake'},{value:'chocolate'}];
              }
              else if(this.dessert == 'Pie'){
                 this.flavours = [{ value:'so' cake'},{value:'on'}];
              }
           }

    }
</script>

Answer 2

You could use v-if / v-else-if to conditionally render your flavor option s based on dessert :

<select v-if="dessert" v-model="flavor">
  <option value="null" selected>Choose flavor</option>
  <template v-if="dessert === 'Ice Cream'">
    <option>Vanilla</option>
    <option>Chocolate</option>
    <option>Strawberry</option>
  </template>
  <template v-else-if="dessert === 'Cake'">
    <option>Angel Food</option>
    <option>Pound</option>
    <option>Carrot</option>
  </template>
  <template v-else-if="dessert === 'Pie'">
    <option>Apple</option>
    <option>Cherry</option>
    <option>Peach</option>
  </template>
</select>

 new Vue({ el: '#app', data() { return { dessert: null, flavor: null, } } })

 <script src="https://unpkg.com/vue@2.6.10"></script> <div id="app"> <select v-model="dessert"> <option value="null" selected>Choose dessert</option> <option>Ice Cream</option> <option>Cake</option> <option>Pie</option> </select> <select v-if="dessert" v-model="flavor"> <option value="null" selected>Choose flavor</option> <template v-if="dessert === 'Ice Cream'"> <option>Vanilla</option> <option>Chocolate</option> <option>Strawberry</option> </template> <template v-else-if="dessert === 'Cake'"> <option>Vanilla</option> <option>Chocolate</option> <option>Carrot</option> </template> <template v-else-if="dessert === 'Pie'"> <option>Apple</option> <option>Cherry</option> <option>Peach</option> </template> </select> </div>