Calling v-close-popup from QSelect-option

[Dennis van Beek]

Hi,

I want to have (filterable) select-box in a sub menu, but I don’t know how to close the menu’s after the user selected a value.

I want (very simplified) something like this structure:

<q-menu>
  <q-item 1/>
  <q-item 2>
    <q-menu>
      <q-select @input="(v-close-popup)">
        <q-item />
      </q-select>
    </q-menu>
  </q-item>
</q-menu>

I have tried a v-close-popup=“3” on the q-select-option’s q-item, but that does not work…

I tried to create a code pen, which illustrates my problem:
https://codepen.io/DennisVanBeek/pen/NWqYwYw

Best regards,
Dennis

[luisdev]

<q-menu ref=“menu”>
…
</q-menu>

then in myMethod call:
myMethod () {
this.$refs.menu.hide()
console.log(‘I want to v-close-popup’)
}

[Dennis van Beek]

This is a good solution, but I wonder if my solution is good/efficient:

In my situation the menu is a context menu, dynamically generated on a (navigation) QTree and a (search) QTable.

Because the tree and table may change a lot, I cannot give a unique reference to all menus (because the references in the page will continue to grow).
So I use a reference array and close all currently existing menus (even though only one can be open):

this.$refs.contextMenu.forEach(e => e.hide())

Secondaly, as far as I know (but I hope that’s my lack of knowledge) a reference array is only created from a v-for loop, which I don’t have in the QTree.
I solved this by looping one time for every branch:

<q-tree ...>
  <template v-slot:default-header="{ node }">
    ...
    <template v-for="item of 1">
      <q-menu :key="item" context-menu ref="contextMenu">
        ...
      </q-menu>
    </template>
  </template>
</q-tree>

If there is a better way to solve (one of) these problems, I’m eager to know

[tof06]

@Dennis-van-Beek What about using v-model on your q-menu, and your q-tree key as index ?

I tried to reproduce what I’ve understood from your question
https://codepen.io/cp-tof06/pen/ZEGRWQ