I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed.
<template>
<div class="registration">
<ul class="nav nav-pills">
<li class="active">
<a href="#1a" data-toggle="tab">Tab1</a>
</li>
<li>
<a href="#2a" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a" >
---Content---
</div>
<div class="tab-pane active" id="2a" >
---Content---
</div>
</div>
</div>
</template>
<script>
export default {
name: 'registration',
data () {
}
}
</script>