I've been attempting to utilize a click event on my tabs in order to set the value of a variable within data(). My goal is to then use this variable in an if statement within my components to test the value and display the component if true. However, this approach doesn't seem to be working as expected, and I'm not encountering any errors. I suspect that the variable's value isn't being properly set when the click event on the tabs is triggered. Is it possible that I can't achieve the desired functionality using this method?
<template>
<div id="settings_page" class="page_body">
<h1>Settings</h1>
<div id="user_info" v-if="user">
<div id="tabs">
<div v-on:click="selected_tab == 'account'">Account Details</div>
<div v-on:click="selected_tab == 'divisions'">Divisions</div>
<div v-on:click="selected_tab == 'users'">Users</div>
<div v-on:click="selected_tab == 'columns'">Columns</div>
</div>
<div class="content">
<div v-if="selected_tab == 'account'">
<h2>Profile</h2>
</div>
<div v-if="selected_tab == 'divisions'">
divisions
</div>
<div v-if="selected_tab == 'users'">
users
</div>
<div v-if="selected_tab == 'columns'">
columns
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
selected_tab: 'account'
}
},
computed:mapGetters(['user']),
methods: {
...mapActions(['getProfile'])
},
created() {
this.getProfile();
}
}
</script>