在不插值的情况下，在VUE 2模板中设置属性的一部分(用于字体可感知图标)的解决方法

Question

我正在尝试使用vue.js创建一个组件，其中该组件包含一个可引人入胜的图标，该图标可在模板中提供。例如，我希望能够使用<big-nav-item icon="fa-phone" word="contact">，并在我的组件中拥有字体可感知的电话图标和contact Land。

问题在于，字体令人垂涎的图标将其标识符在元素的属性中取用，而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绑带或结肠速记。为了 例如，而不是<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>`
});

示例。