Context menu not closing on click

  • I have a context menu I want to close when I click an item. But it doesn’t and throws an error.

    I did like the sample code says:

        <div class="row">
            <div v-for="item in subDirectories">
              <div class="col" @click="navigateToDirectory(item.path)">
                <q-icon name="folder" size="2.5em"/>
                <q-context-menu ref="context">
                  <q-list link style="min-width: 150px; max-height: 300px;">
                    <q-item @click="">
                      <q-icon name="mode edit" style="margin-right: 10px; font-size: 1.2em" />
                      <q-item-main label="Edit" />
                    <q-item @click="renameItemAction(item.path), $refs.context.close()">
                      <q-icon name="insert drive file" style="margin-right: 10px; font-size: 1.2em" />
                      <q-item-main label="Rename" />
                    <q-item @click="">
                      <q-icon name="delete" style="margin-right: 10px; font-size: 1.2em" />
                      <q-item-main label="Delete" />
                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]" :delay="500">{{ }}</q-tooltip>
                <p>{{ }}</p>


    TypeError: _vm.$refs.context.close is not a function

    What is wrong?

    I also tried this.$refs.context.close

  • Okay figured it out.

    When you use a v-for you need to apply an index.

    So changing to:

    <div v-for="(item, index) in subDirectories">


    <q-item @click="renameItemAction(item.path), $refs.context[index].close()">

    Makes it work.

  • Very helpful thanks!

Log in to reply

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