Vuejs 3 不更新primevue 中的菜单

Question

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

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 ，以便在更改内部ref时重新评估它：

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

演示