Vuetify动态创建v-select

Question

I am trying to create v-selects dynamically. As the user selects an option from the first v-select, another one should appear. Since v-selects are not html components I am having a lot of trouble appending new ones to the DOM. Here is the function that creates the new v-select.

makeNewSelect () {
  let newVSelect = document.createElement('div')
  let html = ` <div role="combobox" class="v-input ma-2 v-text-field v-text-field--enclosed v-text-field--outline v-select theme--light">
                <div class="v-input__control"><div class="v-input__slot">
                  <div class="v-select__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Select</label>
                    <div class="v-select__selections"><input aria-label="Select" readonly="readonly" type="text" autocomplete="on" aria-readonly="false"></div>
                      <div class="v-input__append-inner">
                        <div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon material-icons theme--light">arrow_drop_down</i></div>
                      </div>
                    </div>
                    <div class="v-menu"></div>
                  </div>
                  <div class="v-text-field__details">
                    <div class="v-messages theme--light">
                      <div class="v-messages__wrapper"></div>
                    </div>
                  </div>
                </div>
              </div>`
  newVSelect.innerHTML = html
  document.getElementById('selectLayout').appendChild(newVSelect)
},

I got this from inspecting the element of a v-select that already exists on the page. However, when you click to open the select, the classes change which I don't know how to do (or if it's possible) with the v-select that I created. Also, I need each v-select's v-model to be distinct so they don't all change when one does. Is any of this possible? Please help.

EDIT: The data that will be used for the selects will be the same data for each dropdown. The data is retrieved on the beforeMount() and is stored in an array.

Answer 1

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>