如何将数据传递到 PrimeVue MenuItems

Answer 1

我会将弹出窗口添加到您的模板中，并在

rescheduleVisible

为 true 时使其可见。但你需要先在数据中定义

rescheduleVisible

，否则它不是反应变量，Vue 不知道如何观察它。

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

Answer 2

如果我的用例正确，那么您将获得一个约会列表，并且每个约会都有一个包含一些子项的菜单。单击任何子项时，您需要打开一个模式并传递当前约会的 ID。

解决方法可能是
我不确定是否有任何可用的事件或道具可以将循环的当前项目信息传递给菜单组件。但是，您可以使用其他一些逻辑来执行此操作 -

我假设你的模板看起来像这样-

<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>

您可以为选定的约会 ID 创建数据变量 -

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

然后到

toggle

方法，可以传入当前约会的id-

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

并且切换方法可以将传递的约会ID设置为已选择-

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

最后，在任何儿童单击时，您都可以打开模式并传递位于

selected

变量内的选定约会 ID，并在模式关闭时再次重置

selected

变量。

不确定这是否是正确的方法，但找不到很多在 for 循环中使用 PrimeVue Menu 组件的示例。

Answer 3

切换菜单时可以传递id

 <Button @click="toggleListOptions($event, item._id,)" icon="pi pi-ellipsis-v" size="small" />

然后得到了id

function toggleListOptions(event: Event, id: string) {
    console.log("🚀 ~ toggleListOptions ~ id:", id)
    menuListOptions.value.toggle(event)
}