[Vuejs]-Vue3 array push not woking

by

0👍

To trigger reactivity you need to replace the item inside nestedMenuItems.

What’s not clear to me is why aren’t you using a simpler data structure:

const state = reactive({ items: [] });
const { items } = toRefs(state);
onMounted(() => {
  ApiService.getStores().then((data) => {
    data.forEach((value) => {
      state.items.push({ label: value.shop });
    });
  });
});

What do you need nestedMenuItems for? Do you have more than one nestedMenuItem?

You might want to show <Menubar />. Most likely, you don’t need v-model in it, but v-bind. e.g:

<Menubar :items="items" optionValue="value" />

And another question would be: if you’re storing the response in stores, why are you also storing it somewhere else (e.g: in nestedMenuItems, or items)? Why not consume it directly from stores?

For example:

const stores = ref([]);
const items = computed(() => stores.value.map(({ shop: label }) => ({ label })));

onMounted(() => {
  ApiService.getStores().then((data) => {
    stores.value = data;
  });
});

<pre v-text="JSON.stringify({ stores, items }, null, 2)" />

It’s bad practice to keep the same reactive data in two separate places, because you’re always running the risk of them getting out of sync. If you’re using the same source, any change will be reflected in every place where the data is consumed/displayed.

Leave a comment