的Vue 2：模板不能正常呈現

Question

我有一個組件：

Vue.component('repo-button', { 
    template: "<div class='socialCircle-item success'><i class='fa fa-comment show_repo' data-check_in='{{ check_in_id }}' data-repo='{{ repo_id }}'</i></div>" 
}); 

並正嘗試使用以下，以使其：

<repo-button repo_id="8" check_in_id="30"></repo-button> 

，但在我看來，我看到以下內容：

<div class="socialCircle-item success" repo_id="8" check_in_id="30"></div> 

我的<i></i>元素已不存在......我該怎麼渲染它？

Answer 1

我另外添加了通常用於組件的道具定義。

Vue.component('repo-button', { 
    props:["check_in_id", "repo_id"], 
    template: ` 
    <div class='socialCircle-item success'> 
     <i class='fa fa-comment show_repo' 
     :data-check_in='check_in_id' 
     :data-repo='repo_id'></i> 
    </div>` 
}); 

Example。