My PrimeVue Menu setup looks like this:
<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>
export default {
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 have integrated this menu into an appointment listing. When the Reschedule menu item is clicked, I aim to retrieve the corresponding appointment ID to pass it to a modal popup that becomes visible by setting rescheduleVisible as true, displaying details about the appointment. How can this be achieved?
The modal layout is presented below:
<Dialog v-model:visible="rescheduleVisible" modal header="Reschedule" :style="{ width: '30vw' }">
<div class="bg-white dark:bg-gray-800 sm:rounded-lg">
<div class="p-2 text-gray-900 dark:text-gray-100">
<div class="grid grid-col-1 gap-3">
<div class="p-2">
<div>
<InputLabel for="appointment_time" value="Date and Time" />
<Calendar inputId="appointment_time" v-model="form.appointment_time" :showTime="true"
:showSeconds="false" hourFormat="12" />
</div>
</div>
<div class="p-2">
<div>
<InputLabel for="doctor" value="Doctor" />
<Dropdown v-model="form.doctor_id" :options="doctors" optionLabel="name"
optionValue="id" placeholder="Select Doctor" :filter="true" />
</div>
</div>
</div>
<div class="mt-3">
<div class="flex justify-end">
<PrimaryButton class="ml-2" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Reschedule
</PrimaryButton>
</div>
</div>
</div>
</div>
</Dialog>
Edit: Appointment Listing