I am working on populating a v-menu in Vuetify with an array passed as a prop to be used in a v-for loop. Each menu item needs to have @click events assigned, and the names of the functions are provided in the array as strings (for example, the "CanResolve" event seen in the parent component). These function names are then inserted into the v-on:click="item.clickFunctions" for each menu button. Currently, I am storing the functions in the child component, which is not functioning as expected. My ultimate goal is to store these functions in the parent component and have the @click events call them if possible. An example is the myButtonEventHandler method stored in the parent component, supposed to be triggered by the CanResolve event in the child component. However, this event is not being triggered when dynamically created in the v-for loop and @click.
The child component contains a menu that requires click events based on props:
<v-menu bottom
right>
<template v-slot:activator="{ on, attrs }">
<v-btn light
icon
v-bind="attrs"
v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<template v-for="(item,index) in menus">
<v-list-item v-if="item.isActive" :key="index" link>
<v-list-item-title @click="$emit(item.clickFunction)">{{item.title}}</v-list-item-title>
</v-list-item>
</template>
<v-list-item :href="docxLocation(filedir)" download link>
<v-list-item-title>Download</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
Here is how the component is implemented in the parent component:
<embeddedPDF @CanResolve ="myButtonEventHandler" v-bind:filedir="pdfLocation(item.Draft_Path)" v-bind:canvasid="'draft-canvas-'+item.Round" :menus="menuItemsArray[item.Round-1].menus"></embeddedPDF>