【问题标题】:Vuetify custom v-text-field component is not updating the v-modelVuetify 自定义 v-text-field 组件未更新 v-model
【发布时间】:2020-01-16 10:40:42
【问题描述】:

我正在关注此文档:https://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 值没有更新。我还可以补充一点,它可以正常工作(如在文档中)而不是 .我可以做些什么来让它工作,还是应该使用简单的输入? 谢谢

【问题讨论】:

    标签: vue.js vue-component vuetify.js v-model


    【解决方案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

    【讨论】:

    • 它可以工作,谢谢,但是为什么正常&lt;input&gt;没有问题?
    • 这是因为普通输入的工作方式与v-text-field不同
    • @Jesper 好家伙!我尝试了各种复杂的自定义 v-text-field 实现,但这种简单的方法是唯一可行的方法。