动态创建v-select

Question

我正在尝试动态创建v-select。当用户从第一个v-select中选择一个选项时，应该会出现另一个选项。因为v-select不是html组件，所以我在向DOM添加新组件时遇到了很多麻烦。下面是创建新的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)
},

这是我在检查页面上已经存在的v-select元素时得到的。但是，当您单击打开select时，类会发生变化，我不知道如何使用我创建的v-select (或者是否可能)进行更改。此外，我需要每个v-select的v-model是不同的，这样它们就不会在一个改变时全部改变。这一切都有可能吗？请帮帮忙。

编辑:将用于选择的数据将是每个下拉列表的相同数据。在beforeMount()上检索数据并将其存储在一个数组中。

Answer 1

这是一种简单的方法来完成您所描述的操作。我有一个用于所选值的数组。我为每个选定的值进行选择，并为要选择的下一个值进行另一个选择(v-for="index in selections.length + 1")。当选择新值时，这会增加数组的长度，从而产生新的select。

我没有使用Vuetify v-select，但小部件是什么并不重要。v-for将使它们的数量正确。

​

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>

​