如何将获取到的数据图标循环渲染到对应的菜单栏上?

2023-06-16 269 0

UI:

<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <template slot="title">
                <i v-for="item in iconsObj" :class="item" :key="item.index"></i> 
                <span>{{ item.authName }}</span>
              </template>

data:

menuList: [],
iconsObj: ['el-icon-solid', 'el-icon-check', 'el-icon-s-shop', 'el-icon-s-order', 'el-icon-s-marketing'],

渲染出的效果:
image.png

目标:图标依次渲染到对应的菜单栏,而不是全部渲染到每栏上。

<el-submenu :index="item.id + ''" v-for="item, index in menuList" :key="item.id">
  <template slot="title">
    <i :class="iconsObj[index]"></i> 
    <span>{{ item.authName }}</span>
  </template>

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?