这种组件怎么配合v-for遍历出来

发表时间：2022-06-22 16:19:29 阅读：549

用得elementplus，三个一样项想通过一个数组渲染，里面各有一个icon组件不知道如何渲染，可以通过if得方式，但是有没有更好得方法

          <div class="menu-item-content">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>系统功能介绍</span>
          </div>
          <div class="menu-item-content">
            <el-icon>
              <Management />
            </el-icon>
            <span>帮助手册</span>
          </div>
          <div class="menu-item-content">
            <el-icon>
              <Opportunity />
            </el-icon>
            <span>升级日志</span>
          </div>

🎖️ 优质答案

使用动态组件

<div class="menu-item-content" v-for="item in arr">
  <el-icon>
    <component :is="item.componentname"></component>
  </el-icon>
  <span>{{item.label}}</span>
</div>

[{
    label: '帮助手册',
    componentname: 'Management'
}]

不知道 vue 里能不能这么写

const temp = [
  {
    title: '系统功能介绍',
    icon: <InfoFilled />,
  },
  {
    title: '帮助手册',
    icon: <Management />,
  },
  {
    title: '升级日志',
    icon: <Opportunity />,
  },
]