0

I'm using Vue.js v2.6.11, i'm facing performance issues with loading the menus. I need to load the menus as fast as i can but currently it's taking on production server more than 1 sec to load. below is my current code of loading the menus.

is there any way to give loading the menus the most priority ? i tried v-once but the menu didn't render

thanks in advance.

Vuejs

var app = new Vue({
    el: '#app',
    i18n,
    data: {
    ...
        menus: [],
    ...
    },
    methods: {
        ...
    },
    async mounted() {
    ...
        axios.get("...../getMenus")
            .then(response => { this.menus = response.data; });
        ...
    },
    computed: {
        ...
    }
});

HTML

<li class="nav-item dropdown" v-for="m in menus.top" v-cloak>
    <a v-if="m.childs.length > 0" class="nav-link text-white dropdown-toggle" :href="m.m_link" :target="m.m_target" :id="m.m_id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{m.m_name}}</a>
    <a v-else class="nav-link text-white" :target="m.m_target" :href="m.m_link">{{m.m_name}}</a>
    <div v-if="m.childs.length > 0" class="dropdown-menu" :aria-labelledby="m.m_id">
        <a class="dropdown-item" :href="sm.m_link" :target="m.sm_target" v-for="sm in m.childs">{{sm.m_name}}</a>
    </div>
</li>
Improve this question
2
  • 2
    Try moving the API call to created hooks. If still doesn't solves the problem, follow the solution in the given link. stackoverflow.com/questions/41572974/… Commented Aug 30, 2020 at 20:56
  • well, actually replacing mounted with created was a good idea it improves the load time :) thx Commented Aug 30, 2020 at 23:05
Related questions
0
Browser freezes for 4-5 seconds until Vue component finishes loading
1
Sluggish render VueJS page with 2000-3000 items
8
Vue v-for performance is poor
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.