Solutions: Simple: (this.$refs.form as Vue & { validate: () => boolean }).validate() Alternative (use this if you reference this.$refs.form multiple times in your component): computed: { form(): Vue & { validate: () => boolean } { return this.$refs.form as Vue & { validate: () => boolean } } } // Use it like so: this.form.validate() … Read more
You’re likely referring to this example: <v-toolbar color=”grey darken-1″ dark> <v-menu :nudge-width=”100″> <template v-slot:activator=”{ on }”> <v-toolbar-title v-on=”on”> <span>All</span> <v-icon dark>arrow_drop_down</v-icon> </v-toolbar-title> </template> … </v-menu> </v-toolbar> The following line declares a scoped slot named activator, and it is provided a scope object (from VMenu), which contains a property named on: <template v-slot:activator=”{ on }”> This … Read more
Per the Vuetify Migration Guide — ‘Migrating from v1.5.x to v2.0.x’: v-toolbar: All existing scrolling techniques and app functionality has been deprecated and moved to v-app-bar. Thus, starting in Vuetify 2.0, v-app-bar is what you probably want to use at the top of most typical apps since you can do scrolling-related effects and designate v-app-bar … Read more
Update : Works in both version of Vuetify 1.5 and 2: To centralize v-card-text content just apply the class=text-center v-card-title and v-card-actions are flex components so by adding class=”justify-center” to both you can centralize the whole thing: <v-card-title primary-title class=”justify-center”> <div> <h3 class=”headline pink–text text–accent-2″>Superdry</h3> <div>Rookie Aviator Patched BomberproductItem.description</div> </div> </v-card-title> <v-card-actions class=”justify-center”> <v-btn flat … Read more
Your category has name attribute, you can pass to item-text: <v-select :items=”categories” v-model=”category” name=”category” v-validate=”‘required'” item-text=”name” label=”Select a category” />
For anyone using vuetify 2.0 you have to use the footer prop on the data table like so: <v-data-table :headers=”headers” :items=”items” :footer-props=”{ ‘items-per-page-options’: [10, 20, 30, 40, 50] }” :items-per-page=”30″ :search=”search” >
Add the following line to main.js: process.env[‘ELECTRON_DISABLE_SECURITY_WARNINGS’] = ‘true’; However you should read Security, Native Capabilities, and Your Responsibility to fully understand the implications of doing so.
NOTE: Make sure to include styles as per docs Also in case of broken components make sure that your app is wrapped inside v-app tag: <v-app> <v-content> //.. </v-content> </v-app> Documentation says: In order for your application to work properly, you must wrap it in a v-app component. Solution use vue-loader‘s deep selectors >>> like … Read more
With Vuetify 2.0, I would like to propose my solution: Vuetifty Theme Referance Follow the documentation as usual with setting up custom theming, except add another variable (background in my case). import Vue from ‘vue’ import Vuetify from ‘vuetify/lib’ import colors from ‘vuetify/lib/util/colors’ const vuetify = new Vuetify({ theme: { themes: { light: { primary: … Read more
I believe there are two issues with your set up. Firstly, the initial value should be one of the options in select, i.e., you should have people include your defaultSelected; Secondly your object needs to contain a value field, see v-select props. Otherwise you need to specify item-value prop; See a working example here. <v-select … Read more