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

Vue 2：模板无法正确渲染

1 个答案: