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>
                    <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>
                    <q-item @click="">
                      <q-icon name="delete" style="margin-right: 10px; font-size: 1.2em" />
                      <q-item-main label="Delete" />
                    </q-item>
                  </q-list>
                </q-context-menu>
                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]" :delay="500">{{ item.name }}</q-tooltip>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
    

    Error:

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

    And:

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

    Makes it work.


Log in to reply
 

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