在Vuejs for循环中使用方框图标

Question

我正在使用框图标web组件，我试图找出如何使用图标在我的链接数组为每个项目。我只是不确定该不该去做。

<div class="container">
  <div class="linkbox">
    <a :href="link.href" class="link" v-for="link in links" :key="link.href" @click="goTo($event, link.href)">
      {{ link.name }}
      <box-icon></box-icon>
    </a>
  </div>
</div>
export default {
  data() {
    return {
      links:[
        { name: 'Twitter', href: 'http://www.twitter.com', icon: 'twitter' },
        { name: 'Github', href: 'http://www.github.com' },
        { name: 'Linkedin', href: 'http://www.linkedin.com' },
        { name: 'Patreon', href: 'http://www.linkedin.com' },
        { name: 'Linkedin', href: 'http://www.linkedin.com' },
      ]
    }
  }
}

Answer 1

将图标名称绑定到链接中的icon字段:

<box-icon :name="link.icon"></box-icon>