Vuetify自定义v-text-field组件无法更新v-model

Question

我正在遵循这份文档：https://v2.vuejs.org/v2/guide/components.html 我创建了一个自定义的 v-text-field 组件，看起来像这样：

<template>
<div>
<v-text-field
        :label="label"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"></v-text-field>
</div>
</template>

<script>
export default {
    name: "txtbox",
    props: ['value', 'label'],
}
</script>

我几乎成功地在我的主组件中实现了它：

<txtbox
label="Name"
v-model="eventName"
/>

我认为没有必要贴出所有的代码，但如果需要，我会编辑帖子。这是它的工作原理： 我有一个列表，当我点击列表元素时，文本字段将显示它的内容，这很好用。但很遗憾的是，当我编辑文本字段的内容时，v-model的值没有更新。我还可以说，使用普通的input（就像在文档中）可以正常工作，而不是使用v-text-field。我应该怎么做才能让它工作，还是应该使用简单的input？ 谢谢

- jj.badweyn

Answer 1

当您想要$emit新值时，只需发出$event，而不是$event.target.value。

<template>
<div>
    <v-text-field
        :label="label"
        v-bind:value="value"
        v-on:input="$emit('input', $event)"></v-text-field>
</div>
</template>

v-on:input 也可以简写为 @input

- Jesper

---

可以了，谢谢。但是为什么正常的<input>没有问题呢？ - jj.badweyn

那是因为普通输入与 v-text-field 的工作方式不同。 - Jesper

@Jesper 真是个牛人！我尝试了各种复杂的自定义v-text-field实现方式，但这种简单的方法是唯一有效的。 - Richard KeMiKaL GeNeRaL Denton