Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically change select input options in vuejs 2

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.

like image 289
TheShun Avatar asked Nov 05 '16 13:11

TheShun


2 Answers

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>
like image 187
fuzzyCap Avatar answered Nov 13 '22 02:11

fuzzyCap


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>
like image 37
For the Name Avatar answered Nov 13 '22 03:11

For the Name