在Vue.js循环中如何为每个链接项匹配Box Icons？

步骤1：补全链接数组的图标标识 #

你当前的links数组里有几项缺了icon字段，先把每个平台对应的Box Icons标识补全（要和Box Icons官方的图标名称一致）：

links:[
  { name: 'Twitter', href: 'http://www.twitter.com', icon: 'twitter' },
  { name: 'Github', href: 'http://www.github.com', icon: 'github' },
  { name: 'Linkedin', href: 'http://www.linkedin.com', icon: 'linkedin' },
  { name: 'Patreon', href: 'http://www.patreon.com', icon: 'patreon' },
  { name: 'Linkedin', href: 'http://www.linkedin.com', icon: 'linkedin' },
]

步骤2：动态绑定Box Icon的属性 #

Box Icons Web Component通过name属性指定要渲染的图标，直接在模板里把link.icon绑定到这个属性上就行：

<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 :name="link.icon"></box-icon>
    </a>
  </div>
</div>

可选：自定义图标样式 #

如果需要调整图标颜色、大小，直接给box-icon绑定对应的属性即可，比如：

<box-icon :name="link.icon" :color="'#1da1f2'" :size="'20px'"></box-icon>

这样每个链接就能自动匹配对应的Box图标了。

内容的提问来源于stack exchange，提问作者Kibroman