Skip to main content

dataKey

Description​

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

Usage​

dataKey?: string;

Default value​

"contextId"

Example​

Here's how you can specify ActionMenu 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-->
  <ActionMenu :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>
</template>

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

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

Related article: Common context for different targets