Change event for all inputs?

[ray007]

I'm used to all inputs (string, number, select, ...) to emit a bubbling change event, when the user actually commits a new value.
Unfortunately, this is not the case when building a form with vuetify.

Especially inputs with a menu do not emit a change event.

Am I the only one missing this?
Or is there an easy code-pattern to add the event back to all v-select, v-combobox, v-autocomplete, ... instances ?

[Meliceanu]

Vuetify 3 doesn't expose a change event on its inputs — it was dropped from the v2 API. The event that fires consistently across all of them (VTextField, VSelect, VAutocomplete, VCombobox) is update:modelValue. Their declared emits confirm it: each lists 'update:modelValue' and 'update:focused', and none list 'change'.

The asymmetry you're hitting: a text field also bubbles the native DOM change (on blur/commit), but the menu-based inputs commit through update:modelValue with no native change — so @change seems to "work everywhere except selects".

Uniform pattern — listen to update:modelValue:

<v-select v-model="form.role" :items="roles" @update:model-value="onCommit('role', $event)" />
<v-text-field v-model="form.name" @update:model-value="onCommit('name', $event)" />

For menu inputs it fires exactly on commit. Text fields fire on every keystroke; if you want them to commit only on blur (to match the selects), pair it with @update:focused:

<v-text-field
  v-model="form.name"
  @update:focused="(f) => { if (!f) onCommit('name', form.name) }"
/>

And since Vue custom events don't bubble to the form, there's no single form-level change — attach the handler per field (trivial if you render fields from a config array and bind the same @update:model-value).

[ray007]

Yes, I understand what's currently happening.
But what I want is to listen on top on the form for "user has finished editing a value in the form".

The update:model-value gets emitted every keystroke on text inputs, and none of the vue component events a bubbling.

[Meliceanu]

@ray007 Right, that is the real gap. Vuetify 3 has no form level "committed" event, and you are correct that none of the component's custom events bubble.

The way around it is to stop using the Vue events for this and lean on the native DOM change event instead. Two properties make it fit what you want. First, native change bubbles, while Vue's update:modelValue does not, so a single listener on a wrapper around the form catches every text input underneath it. Second, native change fires when the field is committed (on blur, or on Enter for single line fields), not on every keystroke, which is exactly your "user finished editing".

So for anything backed by a real input or textarea (VTextField, VTextarea, number fields) you get form level listening with one handler:

<div @change="onCommit">
  <v-form>
    <v-text-field name="email" v-model="email" />
    <v-textarea name="notes" v-model="notes" />
  </v-form>
</div>

function onCommit(e) {
  // e.target is the native input that just committed
  console.log('committed', e.target.name, e.target.value)
}

Vuetify forwards name to the underlying input, so e.target.name tells you which field fired.

The one input that emits no native change at all is VSelect, because its inner field is readonly and the value is set only in code, so the wrapper never sees it. Wire that one explicitly with update:modelValue, which for a select fires once when an option is picked, a clean commit rather than one event per keystroke:

<v-select name="country" :items="items" v-model="country"
          @update:model-value="v => onCommit({ target: { name: 'country', value: v } })" />

One caveat if you reach for VAutocomplete or VCombobox: those inputs are editable, so they do fire a native change on blur and the wrapper will catch it, but its value is the text shown in the box. With object items ({ title, value }) that text is the title, not the value, so read the model value from update:modelValue there too.

Net result is one onCommit sink for the whole form. Native delegation covers the typed fields, and VSelect (plus autocomplete or combobox when you need the real value) opt in through update:modelValue. It is not a built in form event, but it is the closest idiomatic pattern I found and it holds up.

I checked this on Vuetify 3.12: a text field fires update:modelValue on each keystroke, then a single native change on blur that bubbles all the way to the wrapper carrying the right name and value, even with a VForm in between; VSelect fires only update:modelValue and no native change; VAutocomplete and VCombobox fire a native change on blur carrying the displayed text.

[ray007]

Exactly right, but I had hoped for a solution that doesn't require me to do extra event handling on every VSelect, VCombobox, VAutocomplete, ... that I use.
Input controls send a bubbling change is a fundamental feature in html since forever.

Hmm, maybe I can come up with a vue directive to fix that...

[Meliceanu]

Quick correction to my own earlier idea first: I went and checked the source, and the "listen to native change at the form" route is weaker than I made it sound, so skip it.

Two things I verified that matter here:

• A directive won't universalize this. On a component a custom directive only applies to the root node (Vue docs), with no documented handle to the child's model. And on VSelect there's nothing useful on that node anyway: the inner input is rendered with name={ undefined } (Vuetify moves the name onto a hidden native <select>) and its text is the label, not the value. So a DOM-reading directive can't recover a select's field name or value.

• Native delegation can't reliably identify the field either. change does bubble from VTextField/VTextarea, so a single @change on a wrapper fires on commit for typed fields. But you can't trust e.target.name: Vuetify sets the input name from an internal composable (name={ autocomplete.fieldName.value }), not straight from your name prop. And VSelect emits no native change at all, only update:modelValue.

So there is no bubbling-based, per-form listener that includes selects. That part is a genuine Vuetify constraint, not something a directive fixes.

The one clean, zero-per-field option is to watch the model instead of the DOM. If your fields share one flat reactive object, a snapshot getter gives you every commit, selects included, keyed by field, with no code on any field:

watch(() => ({ ...form }), (val, old) => {
  for (const k in val) if (val[k] !== old?.[k]) onCommit(k, val[k])
})

Note the getter matters: watching the reactive object directly (watch(form, ...)) hands you the same reference as both new and old (documented), so the diff can't work. The spread snapshot is what makes old vs new comparable.

The only trade-off is it fires on the model change, so text fields report per keystroke rather than on blur. If you want "finished editing" semantics for the typed ones, gate those on focusout while letting selects through immediately. But as a single form-level sink that finally includes VSelect, this is the one that holds up.

[ray007]

After finding https://guide.vueframework.com/guide/forms.html#lazy I had hoped that would solve part of my problems, but the v-model.lazy modifier does not seem to work with vuetify text inputs.

Should this work? Is there anything I could have configures wrong?

[Meliceanu]

Don't listen for events here. None of them bubble, so there's no form level event to catch. Watch the model instead.

If your fields sit on one flat reactive object, a single watch covers the whole form, selects included, and tells you which field changed:

import { reactive, watch } from 'vue'

const form = reactive({
  name: '',
  notes: '',
  country: null,
  role: null,
})

function onCommit (field, value) {
  console.log('committed', field, value)
}

const committed = { ...form }

watch(() => ({ ...form }), current => {
  for (const key in current) {
    if (current[key] !== committed[key]) {
      committed[key] = current[key]
      onCommit(key, current[key])
    }
  }
})

Watch a getter that spreads form, not form itself. Watch the object directly and you get the same reference for old and new, so the diff never sees anything.

The catch: it reacts to the model, so text fields fire on every keystroke and selects fire once, when you pick. If you're happy debouncing onCommit that's the whole thing, with nothing wired on any field.

Want the text fields to fire only on blur? Leave them out of the watch and lean on update:focused, which every Vuetify input emits (false on blur, and the model already holds the final value by then). The selects stay covered by the watch, so the text inputs are the only ones you touch:

const TYPED = new Set(['name', 'notes'])

const committed = { ...form }

function commit (field, value) {
  if (value === committed[field]) return
  committed[field] = value
  onCommit(field, value)
}

watch(() => ({ ...form }), current => {
  for (const key in current) {
    if (!TYPED.has(key)) commit(key, current[key])
  }
})

<VTextField v-model="form.name" @update:focused="f => { if (!f) commit('name', form.name) }" />

Don't try to detect the field type from the DOM to skip that TYPED set. A VSelect renders a plain input with inputmode="none", not a readonly one, its visible name is undefined (the real name sits on a hidden native select), and it shows the label, not the value. Nothing there separates a select from a text field cleanly, so keep the split in your own config.

Tested on 3.12.10 and 4.1.5.