Пользовательский компонент v-text-field Vuetify не обновляет v-модель

Я слежу за этой документацией: 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-модели не обновляется. Я также могу добавить, что он отлично работает с нормальным (как в документации) вместо. Могу ли я что-нибудь сделать, чтобы он заработал, или мне следует использовать простой ввод? Спасибо


vue.js vuetify.js vue-component v-model
person jj.badweyn    schedule 16.01.2020    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Если вы хотите $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

person Jesper    schedule 16.01.2020
comment
Работает, спасибо, а почему не было проблем с нормальным <input>? - person jj.badweyn; 16.01.2020
comment
Это потому, что нормальный ввод работает иначе, чем v-text-field - person Jesper; 16.01.2020