我们有一个名为FilterPanel
的Vuetify 3组件;简化版本如下:
<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>
... removed for brevity
</v-chip>
</div>
</template>
Vuetify 2版本与此类似:
<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>
... removed for brevity
</v-chip>
</div>
</template>
稍后在文件中(在<scripts>
中),在导出对象的各种methods
中有以下行:this.$emit('input', { ...this.value, ...qFields })
this.$emit('input', { ...this.value, [this.field]: this.text })
this.$emit('input', omit(this.value, key))
在Vuetify 2版本中,this.value
基本上等同于{ [this.field]: this.text }
(除了w/ getters和setters)。我不确定是因为重新组织的代码还是因为Vuetify的更改,但this.value
现在似乎未定义。
这些发射到底是为了什么?在我们的代码库中没有看到任何@input
,我查看了Vuetify树中的各种组件,也没有明确提到input
事件。
最终,我想弄清楚的是我是否应该:
1.只要删除发射
1.做一些有趣的事情来重建this.value
(例如this.$emit('input', { ...{ [this.field]: this.text }, ...qFields })
)
1.根据Vuetify 3中的一些更改更改这些更改没有在迁移指南中?我注意到了@input event has been replaced by @update:model-value on components that support v-model usage.
,但我不确定具体需要做什么,如果这是相关的-改变第一个发射参数,但第二个参数呢?
谢谢你!
1条答案
按热度按时间ruarlubt1#
我的猜测是,您没有看到任何
@input
事件,因为该组件与v-model
一起使用。在Vue 2中,
v-model
是绑定到prop:value
并监听事件@input
的简写。在Vue 3中,这已经改变为设置prop:modelValue
并监听事件@update:modelValue
。我认为这就是您需要更改的内容-将value
重命名为modelValue
,并发出update:modelValue
而不是input
事件。添加一些细节,看起来这是一个自定义组件,允许从许多属性中选择,然后在
this.value
对象中设置相应的值。我认为它还允许将几个属性覆盖为预设值,并可能完全删除一个属性。这是用户为选定字段输入数据时发出的:
它创建了一个新对象,包含输入prop
:value
中的所有内容,除了this.field
中给出的prop被更改为this.text
中的值。这是当多个属性被覆盖时发出的:
它创建了一个新对象,包含输入prop
:value
中的所有内容,但qFields
中的所有键都被添加到输出中,覆盖了任何已经存在的键。最后,这将发出
:value
,但删除了一个属性:我显然只是猜测,如果不知道
qFields
、omit()
或key
是什么,以及如何使用组件,就不可能说出来。让我知道我有多接近,更重要的是,如果这没有帮助,请添加更多信息。