vue3 array push not woking - vue.js

Question

const myArray =[];
const nestedMenuitems = ref([
{
items:myArray
},
]);
onMounted(() => {
ApiService.getStores().then((data) => {
stores.value = data;
stores.value.map(function(value, _key) {
myArray.push({lable: value.shop});
});
});
});
i am trying show array data items:myArray this line
under the code working fine but mu custom data api to pass data its not working.what is the problem.
how to solve this?
const list= [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass'
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker'
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
];
const nestedMenuitems = ref([
{
items:list
},
]);
i am trying show array data items:myArray this line
under the code working fine but mu custom data api to pass data its not working.what is the problem.
how to solve this?
<Menubar :model="nestedMenuitems" optionValue="value">
</Menubar>
model="nestedMenuitems to get dropdown data

Answer 1

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.