Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

166
Vistas
Vuejs 3 not updating menu in primevue

I am new to Vuejs. I am using Primevue library to build the api using the composition vuejs 3. my problem is that menu is not updating. I want to hide the show button when the element is shown and vice versa. I search all the internet and tried all the solutions I found but in vain. Any help is appreciated, thank you

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>
  `
};
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The problem is the items subproperty change is not reactive, so the items.value.items[].visible props are not automatically updated when quote.value.display_item_date changes.

One solution is to make items a computed prop, so that it gets re-evaluated upon changes to the inner refs:

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

demo

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda