我似乎无法在选项卡中使用菜单。我尝试了所有Vuetify代码笔，甚至还尝试过网站上的代码，但都没有碰运气。我正在使用Vuetify 1.5.18
This is what I'm trying to do.
And this CodePen，但没有运气。
这是我的工作代码，选项卡效果很好，没有菜单可言。
<template>
<v-app>
<v-container fill-height>
<v-layout row wrap align-center>
<v-flex xs10 class="mx-auto">
<side_drawer v-show="side_drawer_show"></side_drawer>
<v-spacer></v-spacer>
<v-flex xs6>
<h1 class="display-1 sans_pro_medium fix-title-height pb-3">FBA Shipping Settings</h1>
</v-flex>
<v-layout row>
<v-flex xs6>
<v-select
required
ref="marketplace"
:items="marketplaces"
label="Select your Amazon Marketplace"
v-model="selected_marketplace"
color="purple darken-3"
prepend-icon="public"
></v-select>
</v-flex>
<v-flex xs6 mt-2 class="text-xs-right" v-show="show_done">
<v-btn color="pink" dark @click="sendToInstructions">
DONE
</v-btn>
</v-flex>
</v-layout>
<v-flex xs12 text-xs-center mx-auto fill-height mb-3>
<v-card class="purple_with_top">
<v-layout row>
<v-flex xs1>
<v-icon class="text-xs-left my_dark_purple_text pretty_icon mt-2" x-large>info</v-icon>
</v-flex>
<v-flex xs12 text-xs-left>
<h1 class="title mont pa-3">Amazon will only accept orders that select the shipping rates defined here in FBA Shipping.</h1>
</v-flex>
</v-layout>
</v-card>
</v-flex>
<v-tabs icons-and-text centered grow color="purple darken-3" dark class="elevation-12">
<v-tabs-slider color="green lighten-1"></v-tabs-slider>
<v-tab :key="standard">
Standard
</v-tab>
<v-tab :key="priority" @click="setPriority" v-show="showThreeSpeeds">
Priority
</v-tab>
<v-tab :key="expedited" @click="setExpedited">
Expedited
</v-tab>
<v-tab :key="no_inventory" v-if="show_no_inventory">
No Inventory
</v-tab>
<v-tab :key="no_inventory" v-if="show_no_inventory">
More Inventory
</v-tab>
<v-menu>
<template v-slot:activator="{ on }">
<v-tab>
Just More
</v-tab>
</template>
<v-list class="grey lighten-3">
<v-list-tile>
More Stuff
</v-list-tile>
</v-list>
</v-menu>
<v-tab-item :key="standard">
<standard_speed :selected_marketplace="selected_marketplace"></standard_speed>
</v-tab-item>
<v-tab-item :key="priority">
<priority_speed :selected_marketplace="selected_marketplace"></priority_speed>
</v-tab-item>
<v-tab-item :key="expedited">
<expedited_speed :selected_marketplace="selected_marketplace"></expedited_speed>
</v-tab-item>
<v-tab-item :key="no_inventory">
<no_inventory_speed
:selected_marketplace="selected_marketplace"
@updateCredsArray="updateCredsArray"
>
</no_inventory_speed>
</v-tab-item>
</v-tabs>
<bottom_drawer :selected_marketplace="selected_marketplace"></bottom_drawer>
</v-flex>
<v-flex xs12 class="mt-2 text-xs-center" v-show="show_done">
<v-btn slot="activator" dark color="pink" @click="sendToInstructions" class="button_width">
I'm Done Saving My Shipping Speeds
</v-btn>
</v-flex>
<v-dialog
v-model="dialog"
width="700"
persistent
v-if="show_fix"
>
<template v-slot:activator="{ on }">
</template>
<v-card>
<fix_credential_instructions></fix_credential_instructions>
<fix_credential_details></fix_credential_details>
</v-card>
</v-dialog>
</v-layout>
</v-container>
</v-app>
</template>
<script>
import standard_speed from '../components/standard_speed.vue';
import priority_speed from '../components/priority_speed.vue';
import expedited_speed from '../components/expedited_speed.vue';
import instructions from '../components/instructions.vue';
import side_drawer from '../components/side_drawer.vue';
import bottom_drawer from '../components/bottom_drawer.vue';
import fix_credential_details from '../components/fix_credential_details.vue';
import fix_credential_instructions from '../components/fix_credential_instructions.vue';
import no_inventory_speed from '../components/no_inventory_speed.vue';
import {dataShare} from '../packs/application.js';
import axios from 'axios';
export default {
data: function() {
return {
dialog: true,
drawer: false,
show_fix: false,
whereToGo: "amazon_credentials",
showThreeSpeeds: true,
selected_marketplace: "",
marketplaces:[],
show_done: false,
side_drawer_show: true,
show_no_inventory: false
};
},
components: {
standard_speed,
priority_speed,
expedited_speed,
instructions,
side_drawer,
bottom_drawer,
fix_credential_details,
fix_credential_instructions,
no_inventory_speed
},
created() {
axios.get('/return_currency_info').then(response => {
dataShare.$emit('currency_symbol', response.data.currency_symbol);
});
axios.get('/return_weight_unit').then(response => {
dataShare.$emit('weight_unit', response.data);
});
dataShare.$on('show_done', (data) => {
this.show_done = data;
});
dataShare.$on('show_dialog', (data) => {
this.dialog = data;
});
dataShare.$emit('speed', this.speed);
let self = this;
self.marketplaces = []
axios.get('/return_marketplaces').then(response => {
response.data.forEach(function(element){
self.marketplaces.push(element);
});
});
axios.get('/show_fix_modal').then(response => {
self.show_fix = response.data
});
axios.get('/return_shop').then(response => {
this.show_no_inventory = response.data
});
},
methods: {
sendToInstructions() {
this.side_drawer_show = false;
dataShare.$emit('whereToGo', "instructions");
},
},
watch: {
selected_marketplace: function(value) {
if(value == "ATVPDKIKX0DER"){
this.showThreeSpeeds = true;
}
else {
this.showThreeSpeeds = false;
}
axios.get("/return_weight_based_data", {params: {marketplace: this.selected_marketplace}}).then(response => {
dataShare.$emit('weight_based_rates', response.data);
});
axios.get("/return_manual_fixed_rates", {params: {marketplace: this.selected_marketplace}}).then(response => {
dataShare.$emit('manual_fixed_rates', response.data);
});
axios.get("/return_manual_free_rates", {params: {marketplace: this.selected_marketplace}}).then(response => {
dataShare.$emit('manual_free_rates', response.data);
});
}
}
};
</script>
<style>
.lobster {
font-family: 'Lobster Two', cursive !important;
font-size: 25px !important;
}
.spacer {
padding-bottom: 40px !important;
}
.push_right {
float: right !important;
}
.button_width {
width: 66.5% !important;
}
.purple_with_top {
background-color: #e1bee7 !important;
border-top: 5px solid #68007d !important;
border-color: #68007d !important;
}
.purple_list {
background-color: #e1bee7 !important;
}
.pretty_icon {
font-size: 40px !important;
border-style: solid;
border-color: rgb(255, 255, 255, .5) !important;
border-radius: 50%;
display: inline-block;
background-color: rgb(255, 255, 255, .5) !important;
}
</style>
答案 0 :(得分：0)
似乎这是Vue和Vuetify之间的一个简单版本问题。因为我什至无法创建一个简单的菜单。