Vuejs 3 不更新 primevue 中的菜单

Question

我是 Vuejs 新手。我正在使用 Primevue 库构建 api 使用组合 vuejs 3。我的问题是菜单没有更新。我想在显示元素时隐藏显示按钮，反之亦然。我搜索了所有互联网并尝试了我找到的所有解决方案但徒劳无功。感谢任何帮助，谢谢

export default {
  name: "Quote",
  components: {
    loader: Loader,
    "p-breadcrumb": primevue.breadcrumb,
    "p-menu": primevue.menu,
    "p-button": primevue.button,
  },
  setup() {
    const {
      onMounted,
      ref,
      watch,
    } = 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();
    const items = ref([
      {
        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
    };
  },
  template:
  `
<div class="container-fluid" v-cloak>
   <div class="text-right">
      <p-menu id="overlay_menu" ref="menu" :model="items" :popup="true"></p-menu>
      <p-button icon="pi pi-cog" class="p-button-rounded p-button-primary m-2" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"></p-button>
      <p-button :label="data.common_lang.save + ' ' + data.common_lang.quote" class=" m-2" /></p-button>
   </div>
</div>
  `
};

Answer 1

问题是 items 子属性更改不是反应性的，因此当 quote.value.display_item_date 更改时 items.value.items[].visible 道具不会自动更新。

一个解决方案是将 items 设为 computed prop，以便在更改内部 refs:

时对其进行重新评估

// const items = ref([...])
const items = computed(() => [...])

demo

Vuejs 3 不更新 primevue 中的菜单

Vuejs 3 not updating menu in primevue

javascript

vue.js

primevue

vuejs3