I'm having an issue with a navbar item not calling the reverseService function on click as expected.
Although my IDE is indicating that the reverseService function is never used, VueJS dev tool doesn't show any problems. However, manually changing the value of the variable updates the content correctly.
HTML
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" @click="reverseService">Services</a>
</li>
</ul>
<div :class="{{ isService ? '' : 'section' }}" id="content">
<div class="row" v-if="!isService">
some content
</div>
<div v-else>
other content
</div>
</div>
script
new Vue({
el: '#content',
data: {
isService: true,
},
methods: {
reverseService: function () {
this.isService = !this.isService;
console.log(this.isService)
}
}
});