Dynamic Heroicons in Vue.js-CodePudding

I assign the heroicon to a variable from my list of menu items.

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

Then I try to display the icon.

<li v-for="item in navigation" >
    <TemplateIcon  />
    <item.icon  />
</li>

The template icon is only shown once, but should be shown twice. I have already tried this

<{{item.icon}} />

{{item.icon}}

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

thx for help

CodePudding user response：

You should use the component component in vue.

You can find the documentation for it here: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

tldr, pass your component in the is prop

<component :is="item.icon"  />

CodePudding user response：

You can use Dynamic component approach which is useful to dynamically switch between components.

This can be achieve by using Vue's <component> element with the special :is attribute.

Demo :

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 >
    <div v-for="(item, index) in navigation" :key="index">
      <component :is="item.icon">Hello</component>
    </div>
  </div>
</div>