在 vue 中动态打开下拉菜单答案

【问题标题】：dynamically open dropdown in vue在 vue 中动态打开下拉菜单
【发布时间】：2017-10-09 17:54:55
【问题描述】：

如何使用原生 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

【问题讨论】：

Is it possible to use JS to open an HTML select to show its option list?的可能重复
这是针对 vue 的，如果有 vue 解决方案，我将不胜感激
Vue 是 javascript。如果 javascript 做不到，Vue 也做不到。
但是 jQuery 可以做到，所以我希望 Vue 有办法做到这一点
jQuery 也是 javascript，所以我会质疑您在哪里看到过这样的示例。有一些替代方法可以通过不使用。例如，jqueryui.com/selectmenu、getbootstrap.com/docs/4.0/components/dropdowns、select2.org/getting-started/basic-usage

标签： vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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();
    }
},

【讨论】：

【解决方案3】：

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

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

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

【讨论】：