Bootstrap-Tabelle CSS funktioniert nicht mit Vue.JS-Komponente

Question

Ich verwende Bootstrap und Vue.js für eine Webapp. Aber ich kann Bootstrap-Tabelle CSS in einer Vue-Komponente nicht verwenden. Wenn ich schreibe

außerhalb Vue-Komponente das CSS funktioniert in Ordnung und die Tabelle ist richtig formatiert. Aber wenn ich den gleichen Code innerhalb <template>...</tenplate> Tag der Vue-Komponente verwenden, wird die active Stil der Bottstrap-Tabelle CSS nicht auf die Tabellenzeile angewendet.

Ich halte die Vue-Komponente in einer .vue Datei und Kompilierung mit Webpack.

Was läuft falsch?

Answer 1

Das Hinzufügen eines tbody Elements zur Tabelle löste das Problem. Der Code lautet nun

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

Die CSS jetzt richtig funktioniert.

Answer 2

Ich kann Tabelle richtig in Vue-Komponente funktioniert sehen. Im Anschluss ist der Code für die Tabelle ich verwende:

<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> 

Hier arbeitet fiddle.