Vue 구성 요소 - 잘못된 위치에서 렌더링

Question

vue 구성 요소와 인라인 템플릿간에 이상한 동작이 나타납니다.

예 # 1 : 예상대로 인라인 템플릿

이 작동된다. vue 구성 요소는 아래의 예 2와 같이 변경되지 않지만 템플릿 콘텐츠를 인라인 템플릿으로 태그에 복사 한 유일한 차이점이 있습니다.

관련 항목 : https://jsfiddle.net/pobffmnv/

<div class="panel panel-primary"> 
    <div class="panel-heading">Current Clients</div> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Client Name</th> 
       <th style="text-align: center;">No. Projects</th> 
       <th style="text-align: center;">Time (7 days)</th> 
       <th style="text-align: center;">Edit</th> 
      </tr> 
     </thead> 
     <tbody> 
      <clientlistitem inline-template> 
       <tr> 
        <td>Test</td> 
        <td style="text-align: center;">0</td> 
        <td style="text-align: center;">0</td> 
        <td style="text-align: center;"> 
         <div class="btn-group btn-group-xs" role="group"> 
          <button type="button" class="btn small btn-primary">Edit</button> 
         </div> 
        </td> 
       </tr> 
      </clientlistitem> 
     </tbody> 
    </table> 
</div> 

이 올바르게 다음 보여줍니다

예제 # 2 : 마이 뷰 템플릿입니다 다음

를 인라인하지 않습니다. 다음은 인라인 템플릿을 제거하기위한 코드 변경입니다.

참조 : https://jsfiddle.net/Ld47hoy2/

<template> 
    <tr> 
     <td>Test</td> 
     <td style="text-align: center;">0</td> 
     <td style="text-align: center;">0</td> 
     <td style="text-align: center;"> 
      <div class="btn-group btn-group-xs" role="group"> 
       <button type="button" class="btn small btn-primary"> 
        Edit 
       </button> 
      </div> 
     </td> 
    </tr> 
</template> 
<script> 
    export default { 

    } 
</script> 

업데이트 페이지 코드 :

<div class="panel panel-primary"> 
    <div class="panel-heading">Current Clients</div> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th>Client Name</th> 
       <th style="text-align: center;">No. Projects</th> 
       <th style="text-align: center;">Time (7 days)</th> 
       <th style="text-align: center;">Edit</th> 
      </tr> 
     </thead> 
     <tbody> 
      <clientlistitem></clientlistitem> 
     </tbody> 
    </table> 
</div> 

그러나, 상기와 다음이 표시됩니다

출력의 소스 코드를 보면 페이지의 렌더링 된 코드를 내 테이블에 넣은 것 같습니다 ...? 나는

어떤 이유 뷰가 출력 해당 위치 대신 하나의 코드가 예상 것입니다 .. 이것은 <tbody></tbody> 태그 사이가 될 것으로 예상하고있다?

Answer 1

in DOM templates의 경우 템플릿은 브라우저에서 먼저 렌더링되고 HTML 표에서는 특정 종류의 요소 만 허용됩니다. 이 경우 구성 요소 clientlistitem이 먼저 외부에 표로 렌더링되고 다음 테이블은 잘못된 위치에 구성 요소를 생성하는 템플릿을 컴파일합니다.

수정하려면 is special attribute을 사용하십시오.

<tbody> 
    <tr is="clientlistitem"></tr> 
</tbody> 

브라우저는 이것을 받아 들일 올바른 장소에 tr 렌더링하지만 뷰는 구성 요소로 해석 할 것입니다.

여기에 귀하의 바이올린 updated이 있습니다.