We have developed a custom Vuetify 3 component known as FilterPanel. Here is a simplified version:
<template>
<div>
<v-container>
<v-row>
<v-col cols="3">
<v-select v-model="field" :items="fields" :menu-props="{ auto: true }">
<v-field />
</v-select>
</v-col>
<v-col>
<v-text-field v-model="text" :type="(formats && formats[field]) || 'text'" @keyup.enter="add" />
</v-col>
<v-col cols="2">
<v-btn @click="add()">
Add Filter
<v-icon end theme="dark"> mdi-filter-plus </v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
<v-chip>
... content removed for brevity
</v-chip>
</div>
</template>
The previous version, Vuetify 2, had a similar structure:
<template>
<div>
<v-text-field v-model="text" :type="(formats && formats[field]) || 'text'" @keyup.enter="add">
<v-select slot="prepend-inner" v-model="field" :items="fields" menu-props="auto" />
<v-btn slot="append" @click="add()" >
Add Filter
<v-icon right dark>mdi-filter-plus</v-icon>
</v-btn>
</v-text-field>
<v-chip>
... content removed for brevity
</v-chip>
</div>
</template>
Further down the file (within the <scripts> section), there are several lines within different methods on the exported object:
this.$emit('input', { ...this.value, ...qFields })this.$emit('input', { ...this.value, [this.field]: this.text })this.$emit('input', omit(this.value, key))In the transition from Vuetify 2 to Vuetify 3, it appears that this.value is now undefined, whereas previously it was equivalent to { [this.field]: this.text } in terms of functionality. The purpose and implementation of these emits are currently unclear to us.
We could potentially take one of the following actions:
- Delete the emits entirely
- Modify the emission to reconstruct
this.value(e.g.
)this.$emit('input', { ...{ [this.field]: this.text }, ...qFields }) - Adjust based on any changes introduced in Vuetify 3 that were not covered in the migration guide. One observation we made was:
However, the exact steps to address this change remain uncertain - should we modify the first emit parameter only, or also make alterations to the second parameter?@input event has been replaced by @update:model-value on components that support v-model usage.
Your insights would be greatly appreciated!