Dynamic nested menu should always have submenu array when vuex store is updated

vuex

#1

i have a dynamic navigation bar on my app where a user can add new buttons as he wishes.

this is the navigation menu its returned from axios from laravel controller

[
{
id: 59,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:20:23",
updated_at: "2019-02-08 07:20:23",
submenu: [
{
id: 94,
navigation_id: 59,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:20:43",
updated_at: "2019-02-08 07:20:43",
}
],
},
{
id: 60,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:20:58",
updated_at: "2019-02-08 07:20:58",
submenu: [
{
id: 95,
navigation_id: 60,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:21:55",
updated_at: "2019-02-08 07:21:55",
}
],
},
{
id: 62,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:40:08",
updated_at: "2019-02-08 07:40:08",
submenu: [
{
id: 100,
navigation_id: 62,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:43:34",
updated_at: "2019-02-08 07:43:34",
},
{
id: 101,
navigation_id: 62,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:43:36",
updated_at: "2019-02-08 07:43:36",
},
{
id: 102,
navigation_id: 62,
name: "Unnamed",
description: "1",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 07:43:53",
updated_at: "2019-02-08 07:43:53",
},
],
},
]

as per the collection above i have main navigation buttons and a sub-array called submenu that contains submenu buttons of every menu item.

The submenu array should be available for every button for my app to work properly even if its empty.

Unfortunately every time a user create a new button vuex is not creating the submenu array for the new btn item.

So basically i need to make sure that this array is created every time.

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        navbtns : [], // top navigation btns
    
    },

    mutations: {

          NEW_NAVBTNS (state,newbtn){

            state.navbtns.push(newbtn);

        },
    },

    actions: {
        addNewNavbtn : function({commit}){

            axios.post('api/navbtns/store', {

                    language_id     : // ...
                    name            :// ...
                    sort            : // ...
                    icon            : '// ...

                })

                .then(function (response) {

                    let newbtn = response.data;

                    commit('NEW_NAVBTNS', newbtn); 


                })

                .catch(function (error) {

                    Event.$emit('requestAlertDanger');

            });

        },

    },
 })

the addNewNavbtn function is responsible of creating new btns, so how can i make sure that submenu : [] array is always available every time i create new button dynamically.


#2

What about:


#3

Its a good start but the navbtns is little mixed up after adding the submenu: [] array.

this is what i can see in vue DevTool after adding the new btn,

// figure 1
- navbtns : array[6]
	-0: object 
	-1: object 
	-2: object 
	-3: object 
	-4: object
		-newbtn // this is the new main btn
		-submenu // this is the new empty array

where i need it to look like this

//figure 2
- navbtns : array[6]
	-0: object 
	-1: object 
	-2: object 
	-3: object 
	-4: object // this is the new button 
		created-at : ---
		posted-at: ----
                btn_name : ----
		id: ---
		page: ---
		-submenu // this is the submenu ( its a relationship array) and inside main btn
			subbtn_name: ---
			data: ---
			link: ---

as per your code, im being able to create the empty array but on the same level on the array (figure 1).

My question would be how to make my array look like (figure 2), meaning the new submenu : [] array should be contained in the main btn no at the same level.

this is what my API is returning as i’m receiving it currently

[
{
id: 2,
language_id: 2,
name: "services",
sort: 3,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
submenu: [ ],
},
{
id: 3,
language_id: 2,
name: "products",
sort: 4,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/خدماتنا",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
submenu: [
{
id: 1,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 4,
icon: "fas fa-desktop",
link_type: "page",
link_page: "/about-us",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 4,
navigation_id: 3,
name: "services",
description: "Description goes here",
sort: 4,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 5,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 3,
icon: "far fa-grin-hearts",
link_type: "page",
link_page: "/home",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
{
id: 6,
navigation_id: 3,
name: "products",
description: "Description goes here",
sort: 3,
icon: "fas fa-award",
link_type: "page",
link_page: "/about-us",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
},
],
},
{
id: 5,
language_id: 2,
name: "products",
sort: 4,
icon: "fas fa-desktop",
link_type: "page",
link_page: "/",
link_file: "",
target: "",
created_at: "2019-02-08 08:19:32",
updated_at: "2019-02-08 08:19:32",
submenu: [ ],
},
{
id: 17,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 20:34:57",
updated_at: "2019-02-08 20:34:57",
submenu: [ ],
},
{
id: 18,
language_id: 2,
name: "Unnamed",
sort: 4,
icon: "fas fa-home",
link_type: "page",
link_page: "1",
link_file: "#",
target: "_blank",
created_at: "2019-02-08 20:38:21",
updated_at: "2019-02-08 20:38:21",
submenu: [ ],
},
]

#4

its working now, … thank you