Компонент Vuetify custom v-text-field не обновляет v-модель - PullRequest
Новая
       47

Компонент Vuetify custom v-text-field не обновляет v-модель

2 голосов
/ 16 января 2020

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

1 Ответ

3 голосов
/ 16 января 2020

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

...