Calling v-close-popup from QSelect-option

  • 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-item 1/>
      <q-item 2>
          <q-select @input="(v-close-popup)">
            <q-item />

    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:

    Best regards,

  • <q-menu ref=“menu”>


    then in myMethod call:
    myMethod () {
    console.log(‘I want to v-close-popup’)

  • 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">

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

  • @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 🙂

Log in to reply