[Vuejs]-Vuetify dynamically create v-select

by

6👍

✅

This is a simple way to do what you describe. I have an array for selected values. I make a select for each of the selected values and another for the next value to be selected (v-for="index in selections.length + 1"). When the new value is selected, that increases the length of the array, which puts up a new select.

I’m not using Vuetify v-select, but it doesn’t matter what the widget is. v-for will make the correct number of them.

new Vue({
  el: '#app',
  data: {
    options: ['one', 'two', 'three'],
    selections: []
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-for="index in selections.length + 1" v-model="selections[index - 1]">
    <option disabled :value="undefined">please select</option>
    <option v-for="opt in options">{{opt}}</option>
  </select>
  <div v-for="chosen in selections">{{chosen}}</div>
</div>
👤Roy J

Leave a comment