在Vue CoreUI中动态添加导航项 [英] Dynamically add navigation items in Vue CoreUI

问题描述

在我的项目中，我想将一些Ajax加载的菜单项添加到Vue中的CoreUI侧栏中.我已经找到了一个可行的解决方案，但是它有点笨拙，可能存在计时问题.因此，我想问您，是否有适当的解决方案，或者至少是更好的解决方案.

In my project, I want to add some Ajax loaded menu items to my CoreUI sidebar in Vue. I already found a working solution, but it's kind of hacky and might have timing issues. Therefore I want to ask you, if there is a proper or at least better solution.

几天前我也发现了这个问题，但是它没有一个答案了.

I also found this question from a few days ago, but it doesn't have an answer yet.

// 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: []
            },
            // ...
        ]
    }
]

推荐答案

_nav.js文件只是CRenderFunction组件可以呈现的数据结构的一个示例

The _nav.js file is just an example of data structure that can be rendered by CRenderFunction component docs

CRenderFunction背后的想法是，您可以从Array/Object渲染组件.

The idea behind CRenderFunction is that you can render components from the Array/Object.

在您的情况下，您有两种选择:

In your case, you have two options:

• 在后端生成CRenderFunction对象，
• 根据您从后端获取的数据，通过计算属性在前端生成CRenderFunction对象

以下是第二种方法的示例:

Here is the example of the second approach:

在模板中

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

在脚本中:

//example array that you receive 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'
        }
      })
    }
  }
}

navItems计算的属性结果:

navItems computed property result:

[{"_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"}
 ]
}]

这篇关于在Vue CoreUI中动态添加导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！