You can set width with header like below headers: [ { text: ‘Dessert (100g serving)’, value: ‘name’, width: ‘20%’}, { text: ‘Calories’, value: ‘calories’, width: ‘50%’ }, { text: ‘Fat (g)’, value: ‘fat’ }, { text: ‘Carbs (g)’, value: ‘carbs’, width: ‘200px’ }, ],
In Vuetify 3 you can pass your object’s attribute name to the item-title property: <v-select … item-title=”name” … /> In Vuetify 2 the property is named item-text rather than item-title.
Not sure if this is the absolute best way but I was able to get a tooltip on a disabled button by wrapping it in a div tag: Codepen <v-tooltip v-model=”show” top> <template v-slot:activator=”{ on }”> <div v-on=”on”> <v-btn disabled icon> <v-icon color=”grey lighten-1″>shopping_cart</v-icon> </v-btn> </div> </template> <span>Programmatic tooltip</span> </v-tooltip>
If you put the slot attribute on a html element, that html element is passed to the child component to fill the slot with that name. If you don’t want to pass along a html element, you can use slot on a template tag within your component. A template tag groups elements, but does not … Read more
v-list-tile, v-btn, and v-card all extend router-link, so you can use any of the router-link attributes directly on those components instead. In your case you can just use <v-list-tile :to=”item.link”>
I found a way around it using @click:row <v-data-table :headers=”headers” :items=”desserts” :items-per-page=”5″ class=”elevation-1″ @click:row=”handleClick”> </v-data-table> The handleClick function returns a value of the clicked item so I call the method I want to act upon the value within the handleClick method. I also manually highlighted the clicked row since I didn’t find a Vuetify way … Read more
You should use a custom row cell : <v-data-table :headers=”headers” :items=”logs”> <template v-slot:item.createdOn=”{ item }”> <span>{{ new Date(item.createdOn).toLocaleString() }}</span> </template> </v-data-table>
wrap button inside <div class=”text-xs-center”> <div class=”text-xs-center”> <v-btn primary> Signup </v-btn> </div> Dev uses it in his examples. For centering buttons in v-card-actions we can add class=”justify-center” (note in v2 class is text-center (so without xs): <v-card-actions class=”justify-center”> <v-btn> Signup </v-btn> </v-card-actions> Codepen For more examples with regards to centering see here
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
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