Vuetify 动态创建 v-select

Question

我正在尝试动态创建 v-selects。当用户从第一个 v-select 中选择一个选项时，另一个应该出现。由于 v-selects 不是 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 元素得到了这个。但是，当您单击打开选择时，类会发生变化，我不知道如何使用我创建的 v-select（或者如果可能的话）。另外，我需要每个 v-select 的 v-model 都是不同的，这样它们就不会在发生时都改变。这有可能吗？请帮忙。

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

Answer 1

这是执行您描述的操作的简单方法。我有一个选定值的数组。我为每个选定的值做一个选择，并为下一个要选择的值 ( v-for="index in selections.length + 1")做一个选择。选择新值时，会增加阵列的长度，从而提出新选择。

我没有使用 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>