侧边栏一级菜单使用不同的图标

Question

页面中有一个侧边栏使用v-for为一级菜单加内容，现在希望给每个内容里加一个不一样的图标。自己只能实现加一样的。怎么办呢？

Answer 1

你v-for的数组里给每个submenu配置一个icon字段。

arr:[{name:'终端管理', icon: 'ios-paper'}, {name:'基础配置', icon: 'ios-people'}]

然后像这样写进去

<Submenu v-for="(item, i) in arr" name="i">
    <template slot="title">
        <Icon :type="item.icon"></Icon>
        {{item.name}}
    </template>
</Submenu>

Answer 2

把需要的不同样式的class写在v-for展开的对象中，加一个额外的控制样式的属性