I can't seem to get a menu working inside a tab. I've tried all the Vuetify Code Pens and even the code on the site to no luck. I'm using Vuetify 1.5.18
This is what I'm trying to do.
And this CodePen but no luck with any.
This is my working code, tabs work great, just no menu to speak of.
<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>
