在vue 2模板中设置部分属性（用于字体可怕图标）而不进行插值的变通方法？

Question

我正在尝试使用vue.js创建一个组件，其中该组件包含一个字体很棒的图标，该图标在模板中提供。例如，我希望能够使用

问题是字体很棒的图标将它们的标识符放在元素的属性中，而Vue.js2.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或冒号速记。例如，而不是

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




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>`
});

例子。