Vue.js中的动态图标

Question

我从菜单项列表中将英雄图标分配给一个变量。

const navigation = [{ name: 'Dashboard', icon: TemplateIcon, href: '#', current: true }]

然后我试着显示图标。

<li v-for="item in navigation" class="relative px-6 py-3">
    <TemplateIcon class="h-5 w-5" />
    <item.icon class="h-5 w-5" />
</li>

模板图标只显示一次，但应该显示两次。我已经试过了

<{{item.icon}} class="h-5 w-5" />

{{item.icon}}

<svg><path :d="item.icon"></path></svg>

thx求助

Answer 1

您可以使用动态分量方法，这对于在组件之间动态切换非常有用。

这可以通过使用带有特殊<component>属性的Vue的:is元素来实现。

演示

​

new Vue({
  el: '#app',
  data: {
    navigation: [{ icon: 'H3' }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container">
    <div v-for="(item, index) in navigation" :key="index">
      <component :is="item.icon">Hello</component>
    </div>
  </div>
</div>

​

Answer 2

您应该在vue中使用component组件。

您可以在这里找到它的文档：https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

tldr，将组件传递到is支柱中

<component :is="item.icon" class="h-5 w-5" />