When executing console.log(this) in the doSomething method, it returns "null".
I was expecting console.log(this.currentPage) to display "main", but unfortunately, the "this" object is null.. :(
Is there a way to access the value of "main" for currentPage?
<template>
<div class="tab_menu_wrap">
<ul class="tab_menu">
<li v-for="tab in tabMenus" v-bind:class="{ active: tab.isActive }" v-on:click="doSomething">
{{ tab.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'tab-menu',
props: {
},
data() {
return {
currentPage: "main",
isActive: true,
tabMenus: [
{
text: 'A',
isActive: true
},
{
text: 'B',
isActive: false
},
{
text: 'C',
isActive: false
}
],
doSomething: function(e){
console.log(this)
}
};
},
method: {
},
computed: {
}
};
</script>