Taking 2 clicks to set variable in v-tab with Vuetify

Question

I am using Vuetify and vuejs to create 3 tabs. I'm dynamically switching between tabs by binding to the href of a v-tab . I'm just changing the speed variable each time I click on a tab. For some reason the speed variable, lags behind by one click. So even though I click on the expedited tab the speed variable is still stuck on standard until I click again, and THEN it is set to expedited and the tab works like normal. Here is my code, and there are no errors..

<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">
                <!--I think the idea here is just to just emit the name passing it to the component which
                then is customized for that speed-->
                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>

Any idea why my speed variable is not getting updated on the first click?

Answer 1

You dont need to set href for v-tab. Its not even listed as option in vuetify api docs Basic example would be

<v-tabs
      v-model="active"
      color="cyan"
      dark
      slider-color="yellow"
    >
      <v-tab
        v-for="n in 3"
        :key="n"
        ripple
      >
        Item {{ n }}
      </v-tab>
      <v-tab-item
        v-for="n in 3"
        :key="n"
      >
        <v-card flat>
          <v-card-text>{{ text }}</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs>