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



  • <q-menu ref=“menu”>

    </q-menu>

    then in myMethod call:
    myMethod () {
    this.$refs.menu.hide()
    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">
            ...
          </q-menu>
        </template>
      </template>
    </q-tree>
    

    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 🙂
    https://codepen.io/cp-tof06/pen/ZEGRWQ


Log in to reply