뷰 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

구성 요소에 일반적으로 사용하는 prop 정의를 추가했습니다.

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.