보간없이 vue 2 템플릿의 속성 일부 (글꼴 굉장한 아이콘 용)를 설정하는 문제를 해결하려면 어떻게해야합니까?

Question

vue.js를 사용하여 구성 요소를 만들려고합니다. 여기에는 템플릿에 제공되는 멋진 글꼴 아이콘이 포함되어 있습니다. 예를 들어, <big-nav-item icon="fa-phone" word="contact">을 사용하고 멋진 글꼴 아이콘과 연락처 구성 요소를 내 구성 요소에 포함시키고 싶습니다.

글꼴의 멋진 아이콘은 요소의 속성에서 식별자를 사용하고 Vue.js 2.0은 요소 속성에서 보간을 사용하지 않는 것 같습니다. 그래서 다음 코드는 실패 뷰 날 템플릿을 통해 구성 요소에 FA-전화 비트를 통과 못하게

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

때문이다. 대신 오류가 발생합니다 :

이

사람이에 대한 좋은 해결 방법을 알고 있나요

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <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>` 
}); 

Example.