I'm encountering an issue with my Vue.js code. I want to display specific content every time I click on a tab.
Here's the code snippet I have written:
<template>
<nav class="horizontal top-border block-section">
<div class="col-md-20" id="tabs">
<a href="#" id="overview" class="col-md-2" @click="active">Overview</a>
<a href="#" id="aboutcompany" class="col-md-2" @click="active">About Company</a>
</nav>
<div id="over" class="show">
<overview></overview>
</div>
<div id="about" class="hide">
<about-company></about-company>
</div>
</template>
<script>
import Overview from './Overview'
import AboutCompany from './AboutCompany'
export default {
components: {
Overview,
AboutCompany
},
methods: {
active(e) {
e.target.id.addClass('show');
}
}
}
</script>
When I click on the "About Company" tab, I expect the
element to have the class "show" and for the element to have the class "hide".