我正在使用Vuetify和vuejs创建3个选项卡。我通过绑定到href的{{1}}在标签之间动态切换。每次单击选项卡时，我只是在更改v-tab变量。由于某种原因，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>
变量在第一次点击时没有得到更新吗？
答案 0 :(得分：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>