CODEWITHSUNDEEP
javascriptvue.jsvuejs2frontendvue-component
connorcode
connorcode

Reputation: 2983

How to conditionally load select options based on another select value

<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.

Upvotes: 1

Views: 278

Answers (2)

tony19
tony19

Reputation: 138676

You could use v-if/v-else-if to conditionally render your flavor options 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/[email protected]"></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>

Upvotes: 1

Neha
Neha

Reputation: 2281

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>

Upvotes: 2

Related Questions