当前位置: 首页 > 知识库问答 >
问题:

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

陶锋
2023-06-13

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

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

共有1个答案

贺博厚
2023-06-13
<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>
 类似资料:
  • 我使用了fetch方法向后端发送了一个请求,获取到了返回数据之后 ,该数据是一个对象类型的,我如何批量创建li到该ul中呢?li中要对应对象的属性 后端数据格式

  • 问题内容: 如何在 呈现字符串之前获取字符串将占用的行数。 将不起作用,因为它们仅在呈现后才被触发。 问题答案: final Rect bounds = new Rect(); final Paint paint = new Paint(); paint.setTextSize(currentTextSize); paint.getTextBounds(testString, 0, testStr

  • 问题内容: 有没有一种方法可以将html渲染为PNG图片?我知道画布是可能的,但我想呈现例如div之类的标准html元素。 问题答案: 我知道这是一个很老的问题,已经有了很多答案,但是我仍然花了几个小时来尝试做自己想做的事情: 给定一个html文件,从命令行生成具有 透明 背景的(png)图像 使用无头的Chrome(此响应的版本为74.0.3729.157),实际上很容易: 命令说明: 您可以从

  • 我创建了一个需要在应用程序的多个部分中单独显示的组件-(在我的导航内部、主页和单独的路由上)。因此,我在此组件中的一个use中进行了所有操作调度(用于读取数据的api调用)效果: 如您所见,此效果应该只运行一次(当组件装载时)。 在其他任何地方,我都不会在此组件内部或外部调度这些特定操作。 该组件在3个位置渲染(导航内部、其自身的时间路径和主组件内部)。我可以在导航内部同时在时间上渲染它,没有问题

  • 本文向大家介绍vue异步axios获取的数据渲染到页面的方法,包括了vue异步axios获取的数据渲染到页面的方法的使用技巧和注意事项,需要的朋友参考一下 我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined。 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式。。。 在创建时获取数据,

  • 我正在使用Vue路由器和基于文件的组件。我打电话给其中一条路线并获取一个参数(slug),该参数使用axios从API获取json。 我使用“组件内保护”来实现这一点,使用名为beforeRouteEnter的方法。我正在将axios的响应传递到下一个方法。 这是可行的,但是,Vue在设置数据之前呈现视图。这将生成