Determine the element under the mouse with popup-proxy

[rubs]

Hi,

This question probably has a simple solution, but I can’t find it in the docs / Google / this forum. I’m creating a context menu and I need to determine the element under the mouse when the menu was called. Specifically, I want a right-click in a tab and move it left or right. Something like this:

<q-tabs
  v-model="selectedTab"
  >

  <q-tab
    v-for="tab in tabs"
    :key="tab.name"
    :name="tab.name"
    :label="tab.label"
    >

    <q-popup-proxy context-menu>

      <q-list>

        <q-item
          clickable
          @click="moveRight(selectedTab)"
          >
          <q-item-section>Move right</q-item-section>
        </q-item>

        <q-item
          clickable
          @click="moveLeft(selectedTab)"
          >
          <q-item-section>Move left</q-item-section>
        </q-item>

      </q-list>

    </q-popup-proxy>

  </q-tab>

</q-tabs>

In the code above, the argument passed to moveRight() and moveLeft() won’t do what I need. I want it to move the tab where the context menu was called, not the currently selected tab.

Thanks in advance.

[beets]

@rubs You should be able to just reference the tab variable from the v-for, so like:

        <q-item
          clickable
          @click="moveRight(tab.name)"
          >
          <q-item-section>Move right</q-item-section>
        </q-item>

Edit: made the example more clear

[turigeza]

@rubs
The easy way I know how to do this is by having a context menu for each tab rather then trying to detect what menu the context tab was activated on.
https://codepen.io/turigeza/pen/yLOxbvB?editors=1010

<!--
  Forked from:
  https://pdanpdan.github.io/quasar-docs/vue-components/tabs#Example--Basic
-->
<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-y-md" style="max-width: 600px">
      <q-tabs v-model="tab" class="text-teal">
        <q-tab v-for="tab in tabs" :key="tab.name" :name="tab.name" :icon="tab.icon" :label="tab.label">
          <q-popup-proxy context-menu>

            <q-list>

              <q-item clickable @click="moveRight(tab)">
                <q-item-section>Move right</q-item-section>
              </q-item>
              <q-item clickable @click="moveLeft(tab)">
                <q-item-section>Move left</q-item-section>
              </q-item>
            </q-list>

          </q-popup-proxy>
        </q-tab>

      </q-tabs>

    </div>
  </div>
</div>

new Vue({
  el: "#q-app",
  data() {
    return {
      tab: "mails",
      tabs: [
        { name: "mails", icon: "mail", label: "Mails" },
        { name: "alarms", icon: "alarm", label: "Alarms" },
        { name: "movies", icon: "movie", label: "Movies" },
        { name: "photos", icon: "photo", label: "Photos" },
        { name: "videos", icon: "slow_motion_video", label: "Videos" }
      ]
    };
  },
  methods: {
    moveRight(tab){
      const index = this.tabs.indexOf(tab);
      let new_index = 0;
      if(index !== this.tabs.length - 1){
        console.log('tes');
        new_index = index+1;
      }
      
      this.tabs.splice(index, 1);
      this.tabs.splice(new_index, 0, tab);
    },
    moveLeft(tab){
      const index = this.tabs.indexOf(tab);
      let new_index = this.tabs.length - 1;
      if(index !== 0){
        new_index = index-1;
      }
      
      this.tabs.splice(index, 1);
      this.tabs.splice(new_index, 0, tab);
    }
  }
});

[rubs]

Thank you guys for the great answers. Much appreciated!