[Vuejs]-How to pass data to PrimeVue MenuItems

I would add popup to your template and make it visible if rescheduleVisible is true. But you need to define rescheduleVisible in your data first, otherwise it is not a reactive variable and Vue doesn’t know how to watch it.

data() {
  return {
    rescheduleVisible: false,
    items: [...

If I get your use case correct then you have a list of appointments and each appointment has a menu that has some children. On click of any children, you need to open a modal and pass the current appointment’s id.

The workaround could be
I am not sure if there is any event or prop available which can pass the loop’s current item information to the Menu component. However, you can use some other logic to do this-

I am assuming your template looks something like this-

<div v-for="appointment in appointments">
  <div  class="">
    ...
  </div>
  <div>
    ...
    <a href="#"><i class="pi pi-ellipsis-v" @click="toggle"></i></a>
    ...
    <Menu ref="menu" :model="items" :popup="true" />
  </div>
</div>

You can create a data variable for the selected appointment id-

data() {
  return {
    selected: null,
  }
}

Then to the toggle method, you can pass the current appointment’s id-

<a href="#"><i class="pi pi-ellipsis-v" @click="toggle($event, appointment.id)"></i></a>

and toggle method can set the passed appointment id as selected-

toggle(event, appointment_id) {
  this.$refs.menu[0].toggle(event);
  this.selected = appointment_id
},

Finally, on any children’s click, you can open the modal and pass the selected appointment’s id which is inside the selected variable, and on the modal’s close, reset the selected variable again.

Not sure if this is the right way or not but couldn’t find many examples of using PrimeVue Menu component in for loop.