No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Context menu not closing on click

    Help
    2
    3
    758
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      Zyme last edited by

      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

      1 Reply Last reply Reply Quote 1
      • Z
        Zyme last edited by

        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.

        1 Reply Last reply Reply Quote 3
        • T
          tdog1234 last edited by

          Very helpful thanks!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post