I'm currently utilizing Vuetify and vuejs to develop a tab system with 3 tabs. The tabs are being switched dynamically by binding to the href of a v-tab. Each time I click on a tab, the value of the speed variable is modified. However, I'm encountering an issue where the speed variable seems to lag behind by one click. This means that even after clicking on the expedited tab, the speed variable remains stuck on standard until the next click, at which point it updates to expedited and the tab functions as expected. I've provided my code below and there don't appear to be any errors present..
<template>
<v-app>
<v-container fill-height>
<v-layout row wrap align-center>
<v-flex xs8 class="mx-auto">
<h1 class="display-1 mont bold fix-title-height pb-3">Shipping Settings</h1>
<v-tabs icons-and-text centered color="purple darken-3" dark class="elevation-12">
<v-tabs-slider color="green lighten-1"></v-tabs-slider>
<v-tab :href="'#' + speed" @click="setStandard">
Standard
</v-tab>
<v-tab :href="'#' + speed" @click="setExpedited">
Expedited
</v-tab>
<v-tab :href="'#' + speed" @click="setPriority">
Priority
</v-tab>
<v-tab-item id="standard">
<standard_speed></standard_speed>
</v-tab-item>
<v-tab-item id="expedited">
<v-card flat>
<v-card-text>expedited here</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item id="priority">
<v-card flat>
<v-card-text>priority here</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
<script>
import standard_speed from '../components/standard_speed.vue';
export default {
data: function() {
return {
speed: "standard"
};
},
components: {
standard_speed
},
methods: {
setStandard() {
console.log("Is speed getting set? " + this.speed);
this.speed = "standard";
},
setExpedited() {
this.speed = "expedited"
},
setPriority() {
this.speed = "priority"
},
}
};
</script>
<style>
</style>
Can anyone provide insight into why my speed variable is experiencing a delay in updating upon the initial click?