Currently, I'm working on developing a Bootstrap tabs component using Vuejs. The tabs component is divided into two parts - the parent tabs-list component that contains multiple tab-list-item components. Take a look at the code for both these components:
//Vue component template for tabs list.
Vue.component('tabs-list', {
template: `<ul class="nav nav-tabs nav-justified" role="tablist">
<tab-list-item v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item>
</ul>`,
data() {
return {
activeTab: 1,
concepts: [ { title: 'Tab A', id:1, active: true},
{ title: 'Tab B', id:2, active: false},
// Add more tab details as needed
]
}
},
methods: {
tabItemClicked(concept) {
console.log(concept);
this.activeTab = concept.id;
this.concepts.forEach(tab=> {
tab.active = (tab.id === concept.id);
});
}
}
});
//Vue component template for tab list item.
Vue.component('tab-list-item', {
props: ['concept', 'selected'],
template: `<li role="presentation" :class="{active:concept.active}">
<a :href='computedHref' :aria-controls="ariaControls" role="tab" data-toggle="tab" @click="tabClicked">
<img :src="aquaImage" class="image-responsive concept-image img-active">
<slot></slot>
</a>
</li>`,
computed: {
computedHref: function() {
return "#concept"+this.concept.title
},
ariaControls: function() {
return "concept"+this.concept.title
},
aquaImage: function() {
return "/images/"+this.concept.title+"-aqua.png"
}
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.selected;
},
methods: {
tabClicked: function() {
this.$emit('tabItemClicked', [this.concept]);
}
}
});
My issue lies in the fact that my tab-list-item should emit an event named tabItemClicked when any of the tabs is clicked. Strangely, nothing appears in the console log. While examining the Vue developer console, I did notice the event being emitted. Why isn't it being captured by the parent tabs-list method? Any assistance would be highly appreciated!