Javascript Vuetify动态创建v-select

Javascript Vuetify动态创建v-select,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我正在尝试动态创建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-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都是不同的,这样当一个v-select的v-model改变时,它们就不会全部改变。这有可能吗?请帮忙


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

这是一种简单的方法来完成您描述的任务。我有一个选定值的数组。我在selections.length+1中为每个选定的值进行选择,并为下一个要选择的值进行选择v-for=index。选择新值时,将增加数组的长度,从而显示新的select

我没有使用Vuetify v-select,但它与小部件是什么无关。v-for将提供正确的数量

新Vue{ el:“应用程序”, 数据:{ 选项:[‘一’、‘二’、‘三’], 选择:[] } }; 请选择 {{opt}} {{selected}}
请告诉我们有关您将用于选择的数据的更多信息。它们是否都有相同的选项,并且有用户想要选择的数量?还是第二个选项取决于第一个选项的内容?@RoyJ感谢您的快速回复。我刚刚编辑了这篇文章,其中包含了关于所选数据的信息。希望这是有帮助的是的!!非常感谢。这太完美了!