dataKey

Description

Optional. Specifies the id of the elements to show Context Menu for

Usage

dataKey?: string;

Example

Here's how you can specify ContextMenu with the default dataKey:

<script setup>
    import { ref } from "vue";

    const resolver = id => id;
    const menu = ref(null);
</script>

<template>
  <!--the resolver property enables the multi-area mode for the menu-->
  <ContextMenu :options="options" :resolver="resolver" ref="menu">
    <!--a menu will appear for all items with the "data-context-id" attribute -->
    <div v-for="item in items" :key="item.id"
      class="item" @click="menu?.show" :data-context-id="item.id"></div>
  </ContextMenu>
</template>

The example below shows how to create ContextMenu with a custom dataKey:

<template>
  <ContextMenu dataKey="dataId" />
  <div data-id="1"></div>
</template>

Related article: Common context for different targets