How does VUE bind several buttons to the same right-click pop-up menu, but can identify the current right-click button in the right-click menu?

1. Now the project encounters such a problem that a single disk on the device is displayed with a button, and then each button has a right-click menu. When you need to use the right-click pop-up menu for different single disks, you need to select configuration and so on. At this time, you need to identify the current single disk type in order to pop up different pop-up boxes.

<v-contextmenu ref="contextmenu" :theme="theme">
  <v-contextmenu-item v-on:click="setClick()"></v-contextmenu-item>
  <v-contextmenu-item v-on:click="getClick()"></v-contextmenu-item>
</v-contextmenu>

<el-row style="margin-top: 10px">
  <el-col :span="1">
    <div class="mainSubrack-front-view-css"></div>
  </el-col>
  <el-col :span="21">
    <div>
      <el-button v-contextmenu:contextmenu :key="index" class="slotCss3" v-for="(card, index) in cards"
                 v-if="index >15 && index <22">
        <template v-if="card.flag">
          <span>{{index + 1}}</span><span v-for="aaa in card.name">{{aaa}}</span>
        </template>
        <template v-if="!card.flag">
          <span>{{index + 1}}</span>
        </template>
      </el-button>
    </div>
    <div style="margin-bottom: 2px">
      <el-button v-contextmenu:contextmenu :key="index" class="slotCss2" v-for="(card, index) in cards"
                 v-if="index >= 14 && index <= 15">
        <template v-if="card.flag">
          <span>{{index + 1}}</span><span v-for="aaa in card.name">{{aaa}}</span>
        </template>
        <template v-if="!card.flag">
          <span>{{index + 1}}</span>
        </template>
      </el-button>
    </div>
  </el-col>
  <el-col :span="1">
    <el-button v-contextmenu:contextmenu :key="index" v-for="(card, index) in cards"
               class="mainSubrack-card-slot-23-css" v-if="index === 22">
      {{index + 1}}
      <br/><br/><br/>
      <template v-if="card.flag">
        <div v-for="aaa in card.name">
          {{ aaa }}<br/><br/>
        </div>
      </template>
      <template v-else>
        <div v-for="aaa in card.name">
          <br/>
        </div>
      </template>
      <br/><br/><br/><br/><br/><br/>
    </el-button>
  </el-col>
</el-row>

<el-row>
  <el-col :span="1">
    <div class="mainSubrack-back-view-css"></div>
  </el-col>
  <el-col :span="23">
    <div style="margin-top: 40px">
      <el-button v-contextmenu:contextmenu :key="index" class="mainSubrack-back-view-1-14-css"
                 v-for="(card, index) in cards" v-if="index < 14">
        {{index + 1}}<br/><br/>
        <template v-if="card.flag">
          <div v-for="aaa in card.name">{{aaa}}</div>
        </template>
        <template v-else>
          <div v-for="aaa in card.name"><br/></div>
        </template>
        <br/><br/><br/><br/><br/><br/><br/>
      </el-button>
    </div>
  </el-col>
</el-row>
<!-- -->
<div>
  <mcpCardConfig v-if="cardConfigVisiable[0].mcp" ref="mcpCardConfig"></mcpCardConfig>
  <mcpCardDetail v-if="cardDetailVisiable[0].mcp" ref="mcpCardDetail"></mcpCardDetail>
  <rbCardConfig v-if="cardConfigVisiable[1].rb" ref="rbCardConfig"></rbCardConfig>
  <rbCardDetail v-if="cardDetailVisiable[1].rb" ref="rbCardDetail"></rbCardDetail>
</div>


3,
clipboard.png

4. As shown in the figure above, different single disk types can recognize some attributes of the current button (such as MCP, RB, etc.)

when you right-click to select configuration or view.
Mar.13,2021

there are many methods, depending on the demand

  1. several buttons are loaded in the same order. $index index is passed in when binding events, and the index is used to judge
  2. .
  3. pass the name directly to judge, such as RB , MCP and so on
  4. on the screenshot.

print $event.target to make it clear,

$event.target.innerText you can get the value of the button


clipboard.png

my code can realize your function, but I don't know how selectedTag is sent in. If you know, you can reply

.
Menu