Vue3组合式API使用PrimeVue时p-menu菜单不更新问题求助

开发者阿泽

2026-9-29

问题根因

你代码中的items为普通ref类型数组，初始化时仅会读取一次quote.value.display_item_date的静态值，后续quote内属性更新时，items数组内的visible字段不会自动同步更新，而PrimeVue的p-menu组件仅会在绑定的model属性发生引用变更时重新渲染菜单，因此无法出现预期的按钮切换效果。

解决方案

推荐使用计算属性computed定义菜单列表，它会自动跟踪依赖的响应式变量，当quote内的属性变更时自动重新计算菜单配置，实现视图自动更新：

首先从Vue导出对象中新增引入computed
将原有的items ref替换为computed定义

修正后的核心代码

setup() {
  const {
    onMounted,
    ref,
    watch,
    computed // 新增导入
  } = Vue;

  const data = ref(frontEndData);
  const quoteIsEdit = ref(false);

  const toggle = (event) => {
    menu.value.toggle(event);
  };
  const quote = ref({
    display_item_date: true,
    display_tax: true,
    display_discount: false,
  });
  const menu = ref();
  // 替换原ref定义为computed
  const items = computed(() => [
    {
      label: data.value.common_lang.options,
      items: [
        {
          visible: quote.value.display_item_date,
          label: data.value.common_lang.hide_item_date,
          icon: 'pi pi-eye-slash',
          command: (event) => {
            quote.value.display_item_date = !quote.value.display_item_date;
          }
        },
        {
          visible: !quote.value.display_item_date,
          label: data.value.common_lang.unhide_item_date,
          icon: 'pi pi-eye',
          command: () => {
            quote.value.display_item_date = !quote.value.display_item_date;
          }
        }
      ]
    }
  ]);

  return {
    data,
    quoteIsEdit,
    menu,
    items,
    toggle
  };
}