vuetify.js

问题 I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.) I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page. Is it even possible to use a v-tooltip with a v-dialog in veutify? This is what I have that

问题 I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs . The routing is done on the server side, so I need a way to set the active tab by properties. It's a very basic task, but I don't get it to work. Example: <v-tabs> <v-tab href="/path1">Tab 1</v-tab> <v-tab href="/path2">Tab 2</v-tab> </v-tabs> This preselects the first tab - fine. Now the question ist: How to preselect the second tab? The following does not work: <v-tabs value="tab2"> <v-tab id="tab1" href="/path1"

问题 I created v-form like this <v-form ref="form" v-model="valid" lazy-validation> ... <v-btn :disabled="!valid" @click="submit" > submit </v-btn> </v-form> script: if (this.$refs.form.validate()) // Error is in here If i just console.log(this.$ref.form) the validate() function is available. But why this error is coming while building? 回答1: Solutions: Simple: (this.$refs.form as Vue & { validate: () => boolean }).validate() Alternative (use this if you reference this.$refs.form multiple times in

问题 I created v-form like this <v-form ref="form" v-model="valid" lazy-validation> ... <v-btn :disabled="!valid" @click="submit" > submit </v-btn> </v-form> script: if (this.$refs.form.validate()) // Error is in here If i just console.log(this.$ref.form) the validate() function is available. But why this error is coming while building? 回答1: Solutions: Simple: (this.$refs.form as Vue & { validate: () => boolean }).validate() Alternative (use this if you reference this.$refs.form multiple times in

问题 My use case. I got an array of objects from a back-end api. I want to render those objects in a v-select This is my code. <v-select :items="categories" name="category" label="Select a category" v-model="category" v-validate="'required'"> </v-select> But it gives me the output. But I wants objects name property to be display in the v-select We would do this in vanilla Vue.js <li v-for="cat in categories" :key="cat.name">{{cat.name}}</li> But here with vuetify we can't do this. :items=

问题 Please advise how to make vuetify v-tabs content displayed in equal height blocks. I found no options for this component in documentation which can help with height alignment. By default v-tab-item height depends on its own content height: Layout example: <div id="app"> <v-app id="inspire"> <div> <v-tabs v-model="active" color="cyan" dark slider-color="yellow"> <v-tab :key="tab-1"> tab 1 </v-tab> <v-tab :key="tab-2"> tab 2 </v-tab> <v-tab-item key="tab-1"> tab 1 content<br> tab 1 content<br>

问题 I have a project in vuejs + vuetify, the project is running fine on chrome browser but when I run the project on Internet Explorer 11 It only shows me the session pages and when i hit the login button it gives me this error Unhandled promise rejection SyntaxError: Expected ':' in console and I have to hit the login button twice to enter the app. Here I do not see the main content of page, only sidebar menu gets displayed and the main content is not renderd and I again get an error in my

问题 I'm trying to put an triangle/arrow under the v-container with some gradient colour but I don't know how to "merge" the gradient. If I create the arrow with CSS the gradient won't match. Any ideas about how to achieve this? Here is the code: HTML: <div id="app"> <v-container fluid pa-0 class="gradient white--text"> <v-layout row wrap text-xs-center> <v-flex xs12> <h1 class="display-1 my-5">Lorem Ipsum</h1> </v-flex> </v-layout> </v-container> <div class="bottom-arrow"></div> </div> CSS:

问题 Vuetify 1.1.8 / Vue 2.5.16 I don't understand why I get 2 different behaviors : 1- testing in Codepen.io html <div id="app"> <v-app id="inspire"> <div class="text-xs-center"> <v-menu offset-y> <v-btn slot="activator" color="primary" dark > <span v-if="this.locale === 'en'">English</span> <span v-if="this.locale === 'fr'">Français</span> <span v-if="this.locale === 'br'">Português</span> </v-btn> <v-list> <v-list-tile v-for="(locale, index) in locales" :key="index" @click="switchLocale(index)"

问题 I am using Vuetify predefined Template 'Google Contacts'. Link: https://vuetifyjs.com/en/examples/layouts/googleContacts I am new in Vuetify and facing difficulties understanding some codes. One is 'slot activator' . Sample Code: <v-list-tile slot="activator"> <v-list-tile-content> <v-list-tile-title> {{ item.text }} </v-list-tile-title> </v-list-tile-content> </v-list-tile> Can anybody tell me how 'slot activator' works? 回答1: When you declare a Vue component, you can create Named Slots,