Question

如何使用原生vue和javascript打开动态创建的下拉列表？

<select ref="dropdown">
    <option v-for="(item, index) in items" :key="index">
        {{item}}
    </option>
</select>

根据我的方法，我试过这些无济于事：

openDropdown () {
    let el = this.$refs.dropdown;
    // this doesnt work
    el.click();
    // this doesnt work
    el.setAttribute('visible', true);
    // this also doesnt work
    el.style.show = true;
}

任何提示或技巧都会有所帮助，谢谢！这必须使用原生Vue。我理解JavaScript本身并不足够，但必须有一种方式让Vue能够做到这一点。我不能使用jQuery

Answer 1

标准<select>正在抵制，请使用VueSelect

<v-select :options="options" ref="dropdown"></v-select>

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: ['1','2']
  },
  mounted: function() {
    const dropdown  = this.$refs.dropdown
    dropdown.select() 
  }
})

见工作CodePen

Answer 2

如果您使用的是v-select，这可能会有所帮助：

<v-select ref="mySelect" v-bind:options="myObjects"></v-select>

mounted: function() {
    this.$refs["mySelect"].open = true;
}

Answer 3

如果使用VueSelect 2，我想到的解决方案是使用activate()方法：

<v-select :options="options" ref="dropdown"></v-select>

mounted: function() {
   const dropdown  = this.$refs.dropdown;
   dropdown.activate()
}

Answer 4

1）设置v-select输入ID：inputId =“ vs__search” 2）设置方法：

openSearch() { let toggleBtn = document.getElementById('vs__search'); let dropDown = document.querySelectorAll('.filters__search.vs__dropdown-menu')[0]; if (dropDown) { toggleBtn.blur(); } else { toggleBtn.focus(); } },

Answer 5

似乎他们一直在重命名该属性以执行此操作。在 Vuetify 2.2.11 中它似乎是：

this.$refs["mySelect"].isMenuActive = true;

动态打开下拉列表

5 个答案: