Question

我似乎无法在选项卡中使用菜单。我尝试了所有Vuetify代码笔，甚至还尝试过网站上的代码，但都没有碰运气。我正在使用Vuetify 1.5.18

这是我的工作代码，选项卡效果很好，没有菜单可言。

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

Answer 1

似乎这是Vue和Vuetify之间的一个简单版本问题。因为我什至无法创建一个简单的菜单。

I found this out when I found this answer.

Vuetify 1.5.18的菜单选项卡

1 个答案: