Vuetify custom v-text-field component is not updating the v-model

Question

I’m following this documentation: https://vuejs.org/v2/guide/components.html I created custom v-text-field component which looks like that:

<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>

I implemented it in my main component almost succesfully:

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

I don’t think it is necessary to paste all the code, but if it is I will edit the post. Here is how it works: I have a list, when i click on the list element the text-field displays content of it, this works fine. Sadly when I’m editing the content of text-field the v-model value is not updating. I can also add that it works fine with normal (like in the docs) instead of . Is there anything I can do to make it work, or should i use simple input ? Thanks

Answer 1

When you want to $emit the new value, you just have to emit the $event, and not $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 can also be shortened to just @input