부트 스트랩 테이블 CSS가 Vue.JS 구성 요소와 작동하지 않습니다.

Question

webapp에 부트 스트랩과 Vue.js를 사용하고 있습니다. 하지만 Vue 구성 요소에는 부트 스트랩 테이블 CSS를 사용할 수 없습니다. 내가 쓸 때

<table> 
    <tr class='active'> 
    <td>place</td> 
    <td>holder</td> 
    </tr> 
</table> 

외부 VUE 구성 요소 CSS는 정상적으로 작동하고 테이블의 형식이 올바로 지정됩니다. 그러나 Vue 구성 요소의 <template>...</tenplate> 태그 내에 동일한 코드를 사용하면 active 스타일의 병목 테이블 css가 테이블 행에 적용되지 않습니다.

Vue 구성 요소를 .vue 파일로 유지하고 webpack으로 컴파일하고 있습니다.

무슨 일입니까?

Answer 1

요소를 테이블에 추가하면 문제가 해결됩니다. 코드는 이제 읽습니다.

<table> 
    <tbody> 
    <tr class='active'> 
     <td>place</td> 
     <td>holder</td> 
    </tr> 
    </tbody> 
</table> 

CSS가 제대로 작동하고 있습니다.

Answer 2

Vue 구성 요소에서 테이블이 제대로 작동하는지 확인할 수 있습니다.

다음

<table class="table"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Email</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Mary</td> 
     <td>Moe</td> 
     <td>mary@example.com</td> 
     </tr> 
     <tr> 
     <td>July</td> 
     <td>Dooley</td> 
     <td>july@example.com</td> 
     </tr> 
    </tbody> 
    </table> 

는 fiddle을하고있다 : 다음은 내가 사용하고 테이블에 대한 코드입니다.