I have PrimeVue Menu as follows:
<template>
<div class="">
<label class="text-slate-500 text-sm">Doctor Name</label>
<div class="text-sm">{{ appointment.doctor.name }}</div>
</div>
<div>
<span>
<a href="#"><i class="pi pi-ellipsis-v" @click="toggle"></i></a>
</span>
<Menu ref="menu" :model="items" :popup="true" />
</div>
</template>
data() {
return {
items: [{
label: 'Reschedule',
command: (event) => {
this.rescheduleVisible = true
},
},
{
label: 'Mark Completed'
},
{
label: 'Cancel Schedule'
},
{
label: 'Generate Bill'
},
{
label: 'Set Reminder'
},
{
label: 'Send Message'
},
]
}
methods: {
toggle(event) {
console.log(event)
this.$refs.menu[0].toggle(event);
}
}
I am using this menu in an appointment listing. Now when I click on the Reschedule
menu item, I need to get the corresponding appointment ID so that I can pass it to the modal popup, that will be visible by setting rescheduleVisible
as true
. How this can be done ?