Add new navigation links on-the-fly using Vue CoreUI's dynamic navigation feature

Question

Add new navigation links on-the-fly using Vue CoreUI's dynamic navigation feature

I am looking to enhance my CoreUI sidebar in Vue by adding some menu items that load via Ajax. While I have found a workaround solution, I believe it may not be the best approach and could potentially cause timing issues. I am reaching out for suggestions on a proper or more efficient solution.

Interestingly, I came across this unanswered question related to this topic just a few days ago.

// main.js
new Vue({
    el: '#app',
    router,
    icons,
    template: '<App/>',
    components: {
        App
    },
    data: {
        clientConfiguration: null
    },
    created: async function () {
        let svcResult = await this.$http.get('Picking/ViewerSettings');
        this.clientConfiguration = svcResult.data;
        this.$children[0].$children[0].$children[0].$data.nav[0]._children[0].items =
            svcResult.data.map(vc => ({
                name: vc.name,
                to: 'test/' + vc.name,
                icon: 'cil-spreadsheet'
            }));
    }
})

// _nav.js
export default [
    {
        _name: 'CSidebarNav',
        _children: [
            {
                _name: 'CSidebarNavDropdown',
                name: 'Lists',
                to: '/test',
                icon: 'cil-list-numbered',
                items: []
            },
            // ...
        ]
    }
]

javascript vue.js axios core-ui

Answer 1

Answer №1

The file _nav.js serves as an illustration of a data structure that can be rendered using the CRenderFunction component. For more information, you can refer to the documentation.

CRenderFunction allows for rendering components from Array/Object.

In your situation, there are two options available:

Create a CRenderFunction object on the backend,
Generate a CRenderFunction object on the frontend using computed properties based on the data received from the backend.

Below is an example demonstrating the second approach:

In the template:

<CRenderFunction flat :content-to-render="navItems"/>

In the script:

// Example array received from backend
const menuItems = [
  { 
    name: 'first item',
    to: '/first',
    icon: 'cil-user'
  },
  { 
    name: 'second item',
    to: '/second'
  },
  { 
    name: 'third item',
    to: '/third'
  }
]

export default {
  computed: {
    navItems () {
      return [
        {
          _name: 'CSidebarNav',
          _children: this.sidebarNavChildren
        }
      ]
    },
    sidebarNavChildren () {
      return menuItems.map(menuItem => {
        return {
          _name: 'CSidebarNavItem',
          name: menuItem.name,
          to: menuItem.to,
          icon: menuItem.icon || 'cil-spreadsheet'
        }
      })
    }
  }
}

Result of navItems computed property:

[{"_name":"CSidebarNav","_children": [
  {"_name":"CSidebarNavItem","name":"first item","to":"/first","icon":"cil-user"}, 
  {"_name":"CSidebarNavItem","name":"second item","to":"/second","icon":"cil-spreadsheet"}, 
  {"_name":"CSidebarNavItem","name":"third item","to":"/third","icon":"cil-spreadsheet"}
 ]
}]

Answer 2

The file _nav.js serves as an illustration of a data structure that can be rendered using the CRenderFunction component. For more information, you can refer to the documentation.

CRenderFunction allows for rendering components from Array/Object.

In your situation, there are two options available:

Create a CRenderFunction object on the backend,
Generate a CRenderFunction object on the frontend using computed properties based on the data received from the backend.

Below is an example demonstrating the second approach:

In the template:

<CRenderFunction flat :content-to-render="navItems"/>

In the script:

// Example array received from backend
const menuItems = [
  { 
    name: 'first item',
    to: '/first',
    icon: 'cil-user'
  },
  { 
    name: 'second item',
    to: '/second'
  },
  { 
    name: 'third item',
    to: '/third'
  }
]

export default {
  computed: {
    navItems () {
      return [
        {
          _name: 'CSidebarNav',
          _children: this.sidebarNavChildren
        }
      ]
    },
    sidebarNavChildren () {
      return menuItems.map(menuItem => {
        return {
          _name: 'CSidebarNavItem',
          name: menuItem.name,
          to: menuItem.to,
          icon: menuItem.icon || 'cil-spreadsheet'
        }
      })
    }
  }
}

Result of navItems computed property:

[{"_name":"CSidebarNav","_children": [
  {"_name":"CSidebarNavItem","name":"first item","to":"/first","icon":"cil-user"}, 
  {"_name":"CSidebarNavItem","name":"second item","to":"/second","icon":"cil-spreadsheet"}, 
  {"_name":"CSidebarNavItem","name":"third item","to":"/third","icon":"cil-spreadsheet"}
 ]
}]

Add new navigation links on-the-fly using Vue CoreUI's dynamic navigation feature

Answer №1

Similar questions

Prevent Buttons from Being Clicked While Another is Active in Angular

Tips for updating the left positioning of a Div element on the fly

Methods for extracting the date value from a Material UI datepicker?

Discover the effective method in Angular to display a solitary password validation message while dealing with numerous ones

Issue: main@HEAD Failed during 'site building' stage: Build script ended with non-zero exit code: 2

Ramda Transitioning to a Liberated Style of Programming

Ways to enhance the input field's value without completely replacing it with a new value using jQuery

Ways to stop Angular from automatically scrolling to the center of the page

Elastic_Frame | "Error: Unable to process action as property 'toLowerCase' is not defined"

An effective method for injecting a mixin into a component on the fly

Sort the data - a selection menu is included in each row of the table

Tips for integrating Vue.js and Semantic UI to create stunning web applications

The Redis port and host remain unset despite having defined environment variables

Asynchronous retrieval of reference value from Firebase Firestore in ReactJS

What is the best method for establishing communication between a Firebase service worker and a Vue/Vuex web application?

Export all entries without taking into account pagination limits

Finding MongoDB data using an Express route and displaying it in a Jade template

Filtering with checkboxes (looking for help with logic functionality)

Utilizing for loop and specific string selectors in an undefined AJAX post request

Creating a custom loading spinner featuring your logo