How to open <q-context-menu>



  • In the docs, the following example for <q-context-menu> is provided:

        <div ref="target" style="height: 100px; width: 100px; background-color: purple">
          <q-context-menu ref="context">
            <q-list link separator style="min-width: 150px; max-height: 300px;">
              <q-item @click="showToast(), $refs.context.close()">
                <q-item-main label="Label" sublabel="Value"></q-item-main>
              </q-item>
              <q-item @click="showOtherToast(), $refs.context.close()">
                <q-item-main label="Other Label" sublabel="Other Value"></q-item-main>
              </q-item>
            </q-list>
          </q-context-menu>
        </div>
    

    However, I cannot figure out how to open the context menu.

    EDIT: I got it!! I had to wrap the q-context-menu in a div with ref=“target”. Then right clicking on the div opens the context menu. I changed the code above to reflect the solution.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.