vuetify - Digital Craftsman

Digital Craftsman

Sign in Subscribe

vuetify

A collection of 4 posts

Use Vue modifiers to make form handling with Vuetify easier

Use Vue modifiers to make form handling with Vuetify easier

Vue contains two very convenient v-model modifiers for trim and number. Using them means that the models are only updated after the trim or number conversion are done, which means we don't have to do those things ourself anymore. As an example let's say we have a form with the

Format localized Vuetify datepicker value with Vue mixin

Format localized Vuetify datepicker value with Vue mixin

The example for showing a formatted date in a datepicker with Vuetify uses a computed property to format the value in the text field. Something like this:

With a computed property (or a getter function in Typescript): g

Checkbox group in Vuetify

Checkbox group in Vuetify

There is already a component for a radio group from Vuetify, but if you want to handle multiple checkboxes, you're out of luck. It doesn't seem to likely, that this will change any time soon as a Github issue for it was closed by the maintainer with the reply that:

Working with forms and Vuetify

Working with forms and Vuetify

Vuetify is a great component library, but it doesn't really guide you through the Javascript or Typescript part. I usually use Typescript and found a good way to handle forms throughout all components. It all start's with an interface: export interface FormDefinition { valid: boolean; fields: { [key: string]: any; }; rules?: { [key: