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>
  // the id inside the resolver is the value of the "data-context-id" attribute
  function getItem(id){
        return items.find(a => a.id == id);
    }
</script>

<template>
  <ContextMenu :options="options" :resolver="getItem">
      <div v-for="item in items" :key="item.id"
        :data-context-id="item.id" class="item">{{ item.type }} {{ item.id }}</div>
  </ContextMenu>
</template>

Details

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 ContextMenu for multiple targets

Related sample: ContextData