如何将数据传递到PrimeVue菜单项

mtb9vblg 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(139)

我的PrimeVue菜单如下：

<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);
    }
  }
}

我在约会列表中使用此菜单。现在，当我单击Reschedule菜单项时，我需要获取相应的约会ID，以便将其传递到模态弹出窗口，通过将rescheduleVisible设置为true并显示约会的详细信息，可以看到模态弹出窗口。如何完成此操作？
模态如下所示：

<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">
          <!-- <SecondaryButton class="ml-2" @click="cancel()">Cancel</SecondaryButton> -->
          <PrimaryButton class="ml-2" :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing">
            Reschedule
          </PrimaryButton>
        </div>
      </div>
    </div>
  </div>
</Dialog>

编辑：约会列表

vue.js

来源：https://stackoverflow.com/questions/75711676/how-to-pass-data-to-primevue-menuitems

2条答案

按热度按时间

vxbzzdmp1#

如果rescheduleVisible为真，我会在模板中添加弹出窗口，使其可见。但您需要首先在数据中定义rescheduleVisible，否则它不是React变量，Vue不知道如何观察它。

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

赞(0）回复(0）举报 2023-03-13

q8l4jmvw2#

如果我的用例是正确的，那么你有一个约会列表，每个约会都有一个菜单，菜单上有一些子项，当点击任何子项时，你需要打开一个模态，并传递当前约会的id。

解决方法可能是

我不确定是否有任何事件或属性可以将循环的当前项目信息传递给Menu组件。但是，您可以使用一些其他逻辑来完成此操作-
我假设你的模板是这样的-

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

然后将当前约会的id传递给toggle方法-

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

并且toggle方法可以将所传递的约会ID设置为所选择的。

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

最后，在任何孩子单击时，您都可以打开模态并传递selected变量中所选约会的id，在模态关闭时，再次重置selected变量。
不确定这是否是正确的方法，但无法找到在for循环中使用PrimeVue菜单组件的许多示例。

赞(0）回复(0）举报 2023-03-13

我来回答

如何将数据传递到PrimeVue菜单项

2条答案

相关问题

热门标签

最新问答