How to open <q-context-menu>

[joefly]

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.