在没有插值的情况下在vue 2模板中设置属性的一部分(对于font-awesome图标)的解决方法？

Question

我正在尝试使用vue.js创建一个组件,其中组件包含一个字体 - 真棒图标,它在模板中提供.例如,我希望能够<big-nav-item icon="fa-phone" word="contact">在我的组件中使用并拥有字体超棒的电话图标和单词contact land.

问题是font-awesome图标在元素的属性中使用它们的标识符,而Vue.js 2.0似乎不想在元素属性中使用插值.因此以下代码失败:

Vue.component("big-nav-item", {
    props: ["icon", "word"],
    template: '<div class="three columns"><span class="fa-stack fa-3x"><i class="fa {{ icon }} fa-stack-2x"></i><span class="fa fa-stack-1x" style="margin-top:50%; font-size:20px; font-weight:bold;">{{ word }}</span></span></div>'
});

因为Vue不允许我通过模板将fa-phone位传递给组件.相反,它会抛出一个错误:

内部属性中的插值已被删除.改为使用v-bind或冒号.例如,而不是<div class="{{ val }}">, use <div :class="val">.

有谁知道一个很好的解决方法吗？我唯一可以想到的尝试,就是看起来非常尴尬,就是为组件编写一个方法,使用原始字符串连接来构建整个图标元素,然后将整个内容插入到模板中.我想如果没有这个问题的标准解决方案,我会尝试...

Answer 1

基本上,在这种情况下,

Vue.component("big-nav-item", {
    props: ["icon", "word"],
    template: `
      <div class="three columns">
        <span class="fa-stack fa-3x">
          <i class="fa fa-stack-2x" :class="icon"></i>
          <span class="fa fa-stack-1x" style="margin-top:50%; font-size:20px; font-weight:bold;">{{ word }}</span>
        </span>
      </div>`
});

例子.