javascript - 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 都是不同的，这样当一个 v-select 发生变化时它们就不会全部改变。这有可能吗？请帮忙。

编辑:用于选择的数据将与每个下拉列表的数据相同。数据在 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>