dynamically open dropdown in vue

Question

how do i open up a dynamically created dropdown using native vue and javascript?

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

under my methods i have tried these to no avail:

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;
}

any tips or tricks would be helpful, thanks! This has to use native Vue. i understand JavaScript wont suffice on its own, but there has to be a way that Vue is able to do this. And i cannot use jQuery

Possible duplicate of [Is it possible to use JS to open an HTML select to show its option list?](https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — thanksd, Oct 09 '17 at 18:01
this is for vue, so i would appreciate a vue solution if there is one — VinniePhil, Oct 09 '17 at 18:03
Vue is javascript. If javascript can't do it, Vue cannot either. — Taplar, Oct 09 '17 at 18:03
but jQuery can do it, so im hoping there is a way that Vue can do it — VinniePhil, Oct 09 '17 at 18:08
jQuery is also javascript, so I would question where you've seen an example of this. There are alternatives to make this work by not using a like in this case. Examples, http://jqueryui.com/selectmenu/ , https://getbootstrap.com/docs/4.0/components/dropdowns/ , https://select2.org/getting-started/basic-usage — Taplar, Oct 09 '17 at 18:10
I'm not suggesting to use jQuery. I'm simply pointing out why it doesn't work with jQuery and why plugins have been made to make up for this deficiency with the native — Taplar, Oct 09 '17 at 22:40

score 0 · Answer 1 · answered Feb 04 '21 at 01:11

0

It seems they keep renaming the property to do this. In Vuetify 2.2.11 it seems to be:

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

answered Feb 04 '21 at 01:11

Steve Bennett

114,604
39
168
219

score 0 · Answer 2 · answered Nov 09 '22 at 11:44

0

Call focus() and set isMenuActive = true

answered Nov 09 '22 at 11:44

wast

878
9
27

score -1 · Answer 3 · edited Jan 27 '20 at 22:27

-1

1) Set v-select input ID: inputId="vs__search" 2) Set method:

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

edited Jan 27 '20 at 22:27

Nicolas Perraut

797
1
9
32

answered Nov 20 '19 at 21:31

Siviy

69
1
7

score -2 · Answer 4 · answered Aug 06 '19 at 09:37

-2

If using VueSelect 2, the solution I came up with was using activate() method:

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

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

answered Aug 06 '19 at 09:37

Murilo Boareto Delefrate

81
9

dynamically open dropdown in vue

4 Answers4