Vue 2：模板未正确呈现答案

【问题标题】：Vue 2: Template not rendering properlyVue 2：模板未正确呈现
【发布时间】：2017-08-28 14:15:36
【问题描述】：

我有一个组件：

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> 元素不再存在...我还应该如何渲染它？

【问题讨论】：

您为<i> 留下了右尖括号。此外，您可能应该使用绑定语法。
嘘。感谢您了解

标签： vue.js components vuejs2

【解决方案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.

【讨论】：