Context menu not closing on click

[Zyme]

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

[Zyme]

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.

[tdog1234]

Very helpful thanks!