Skip to main content

resolver

Description​

Optional. Enables the multi-area mode and defines whether an element needs a menu

Usage​

resolver?: (item: any, event: MouseEvent) => any;

Parameters​

The resolver function receives two arguments:

  • item - the value of the data-context-id attribute (or any custom identifier associated with the clicked element).
  • event - the native MouseEvent that triggered the menu.

The function should return:

  • false or null → no menu will be shown.
  • true → the menu will be shown with the item's raw identifier.
  • any object → the returned value will be passed as the context in the menu's onclick event.

Example​

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

  // the id inside the resolver is the value of the "data-context-id" attribute
  const resolver = id => id;
  const menu = ref(null);
</script>

<template>
  <!--a menu will appear for all items with the "data-context-id" attribute -->
  <ActionMenu :options="options" :resolver="resolver" ref="menu" />

  <div v-for="item in items" :key="item.id"
    class="item" @click="menu?.show" :data-context-id="item.id"></div>
</template>

Details​

The result of the resolver call will be provided in the resulting click event.

Check the examples of valid resolvers below:

const allowAll = (id, ev) => true;
const allowElementsWithCorrectAttribute = (id, ev) => return id;
const allowAndReturnTaskObject = (id, ev) => return tasks[id];

Related article: Using Action Menu for multiple targets

Related sample: