Dynamically change select input options in vuejs 2

Question

How to change dynamically the options in a select dropdown v-model ?

I have 2 select inputs, one should change according to the others.

For example, if i select "fruits" the select display the fruits, if i select "vegetables" it displays the vegetables.

Answer 1

I don't use Vuejs, but after looking at the documentation:

var TypesArr = {
                Fruit: [{ text: 'Apple', value: 'Apple' }, { text: 'Orange', value: 'Orange' }, { text: 'Mango', value: 'Mango' }],
                Meat:  [{ text: 'Steak', value: 'Steak' }, { text: 'Pork', value: 'Pork' }]
               }


var selectTwo = new Vue({
    el: '#select2',
    data: {
           selected: TypesArr['Fruit'][0],
           options: TypesArr['Fruit']
       },
       methods: {
         update: function (value)
         {
             this.options = TypesArr[value]
         }
       }
})


new Vue({
    el: '#select1',
    data: {
           selected: 'Fruit',
           options: [ { text: 'Fruit', value: 'Fruit' }, { text: 'Meat', value: 'Meat' } ]
       },
       methods: {
         onChange: function (event)
         {
             selectTwo.update(event.srcElement.value)
         }
       }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<select v-on:change="onChange" id="select1">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
</select>

<select id="select2">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
</select>

Answer 2

The other answers are not really 'Vue' answers.

How you handle this depends on what you want to do with the select box. I'm assuming you'll to handle the input on a form.

Two options:

1. Use a Computed property
2. Use v-if to show different select boxes. This would be ideal if each select box has a different v-model

Computed Property

<template>
 <div class="container">
    <select id="firstInput" v-model="selected">
        <option v-for="option in firstInputOptions" :value="option">
        {{ option }}
        </option>
    </select>
    <select id="secondInput" v-model="secondInputSelected">
        <option v-for="option in secondInputOptions" :value="option">
        {{ option }}
        </option>
    </select>
 </div> <!-- /container -->
</template>

<script>
export default {
  computed: {
    secondInputOptions(){
      return this.selected === 'fruit' ? this.fruit : this.vegetables
    }
  },
  data () {
    return {
      fruit: ['apple', 'banana', 'orange'],
      vegetables: ['carrot', 'beet', 'celery'],
      firstInputOptions: ['fruit', 'vegetables']
      selected: 'fruit',
      secondInputSelected: ''
    }
  },
}
</script>

Conditional Rendering

<template>
 <div class="container">
    <select id="firstInput" v-model="selected">
        <option v-for="option in firstInputOptions" :value="option">
        {{ option }}
        </option>
    </select>
    <select id="secondInputFruit" v-model="selected" v-if="selected == 'fruit'">
        <option v-for="option in secondInputOptions" :value="option">
        {{ option }}
        </option>
    </select>
    <select id="secondInputVegetables" v-model="vegetableSelected" v-else-if="selected == 'vegetables'">
        <option v-for="option in secondInputOptions" :value="option">
        {{ option }}
        </option>
    </select>
 </div> <!-- /container -->
</template>

<script>
export default {   
  data () {
    return {
      fruits: ['apple', 'banana', 'orange'],
      fruitSelected: '',
      vegetables: ['carrot', 'beet', 'celery'],
      vegetableSelected: '',
      firstInputOptions: ['fruit', 'vegetables']
      selected: 'fruit' 
    }
  },
}
</script>

Answer 3

Using pure javascript

var typesArr = {fruit: ['Apple', 'Orange', 'Mango'], meat: ['Steak', 'Pork']}


function changeContext(value)
{
    if (typesArr.hasOwnProperty(value)) {
        var out = ''

        for (var i = 0; i < typesArr[value].length; i++) {
             out += '<option value="' + typesArr[value][i] + '">' + typesArr[value][i] + '</option>'
        }

        document.getElementById('select2').innerHTML = out
    }
}

changeContext('fruit')

<select onchange="changeContext(this.value)">
    <option value="fruit">Fruit</option>
    <option value="meat">Meat</option>
</select>

<select id="select2"></select>