javascript - 单击 2 次即可使用 Vuetify 在 v-tab 中设置变量

Question

我正在使用 Vuetify 和 vuejs 创建 3 个选项卡。我通过绑定(bind)到 v-tab 的 href 来动态切换选项卡。我只是在每次单击选项卡时更改 speed 变量。由于某种原因，speed 变量落后于一次点击。因此，即使我单击 expedited 选项卡，speed 变量仍然停留在 standard 上，直到我再次单击，然后将其设置为 expedited 并且该选项卡正常工作。这是我的代码，没有错误..

<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>

知道为什么我的speed变量在第一次点击时没有更新吗？

Answer 1

您不需要为 v-tab 设置 href。它甚至没有在 vuetify api docs 中列为选项。基本示例是

<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>