Question

我正在尝试动态创建v选择。当用户从第一个v-选择中选择一个选项时，另一个应该出现。由于v-selects不是html组件，因此在将新组件添加到DOM时遇到很多麻烦。这是创建新v选择的功能。

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>

Vuetify动态创建v-select

1 个答案: