With 7 tabs on my Vue.js page, I aim to activate the tab corresponding to the current day. However, I am facing a challenge where only the active tab is being highlighted and not allowing me to navigate to others after applying if-else statements. How can I ensure that all tabs are activated upon click and not just based on the current day?
https://i.sstatic.net/YyQjn.png
<template>
<div>
<div id="tabs" class="container">
<div class="tabs">
<a v-on:click="timestamp = 1"
v-bind:class="[timestamp === 1 ? 'active' : '' ]">Friday</a>
<a
v-on:click="timestamp = 2"
v-bind:class="[timestamp === 2 ? 'active' : '']"
>Thursday</a>
<a
v-on:click="timestamp = 3"
v-bind:class="[timestamp === 3 ? 'active' : '']"
>Wednesday</a>
<a
v-on:click="timestamp = 4"
v-bind:class="[timestamp === 4 ? 'active' : '']"
>Tuesday</a>
<a
v-on:click="timestamp = 5"
v-bind:class="[timestamp === 5 ? 'active' : '']"
>Monday</a>
<a
v-on:click="timestamp = 6"
v-bind:class="[timestamp === 6 ? 'active' : '']"
>Sunday</a>
<a
v-on:click="timestamp = 7"
v-bind:onClick="[timestamp === 7 ? 'active' : '']"
>Saturday</a>
</div>
<div class="content">
<div v-if="timestamp === 1 " class="tabcontent">
</div>
<div v-if="timestamp === 2" class="tabcontent">
Content for tab two
</div>
<div v-if="timestamp === 3" class="tabcontent">
Content for tab three
</div>
<div v-if="timestamp === 4" class="tabcontent">
Content for tab three
</div>
<div v-if="timestamp === 5" class="tabcontent">
Content for tab three
</div>
<div v-if="timestamp === 6" class="tabcontent">
Content for tab three
</div>
<div v-if="timestamp === 7" class="tabcontent">
Content for tab three
</div>
</div>
</div>
</template>
<script>
import moment from 'moment';
export default {
data: function() {
return {
activetab:'',
pageName: 'MB',
pageDescription: 'This is MB',
data: {
timestamp : '',
activetab:''
},
}
},
name: 'mb',
computed: {
timestamp : function() {
if ( moment().format('dddd') === "Saturday"){
return 7
} else if ( moment().format('dddd') === "Sunday") {
return 6
}else if ( moment().format('dddd') === "Monday") {
return 5
}else if ( moment().format('dddd') === "Tuesday") {
return 4
}else if ( moment().format('dddd') === "Wednesday") {
return 3
}else if ( moment().format('dddd') === "Thursday") {
return 2
}else if ( moment().format('dddd') === "Friday"){
return 1
} else (moment().format('dddd') === "hassan")
return 2
}
},
};
</script>