Как прокинуть v-model в компоненте?

Question

[Ilya]

Есть компонент инпута, получилось прокинуть в него v-model, но при изменении самой v-model значение инпута не сбрасывается. Как селат так что бы после очистки модели менялось и значение

<template lang='pug'>
     div(:class="[ active ? 'form-group form-group_valid' : 'form-group' ]")
        label.form-group__label(:for='name') {{ label }}
        input.form-group__field(:type='type' :id='name' :name='name' autocomplete='off' ref='field' @focus='onFocus()' @blur='onBlur()' @input='onInput()')
</template>

<script>
    export default {
        name: 'Field',
        data() {
            return {
                active: false
            }
        },
        props: {
            type: {
                type: String,
                required: true
            },
            name: {
                type: String,
                required: true
            },
            label: {
                type: String,
                required: true
            }
        },
        methods: {
            onFocus() {
                this.active = true;
            },

            onBlur() {
                this.$refs.field.value ? this.active = true : this.active = false
            },

            onInput(value) {
                this.$emit('input', event.target.value)
            },
        }
    }
</script>

Тут на сабмит форм после диспатча пытаюсь очистить поля

<template lang='pug'>
    form.form.form_singup(@submit.prevent='onSingup()')
            h2.heading-b2b.heading-b2b_form Я - новый партнер
                                            
            field(type='email' name='userEmailSingup' label='E-mail*' class='mb-4' v-model='email')

            field(type='password' name='userPasswordSingup' label='Пароль*' class='mb-5' v-model='password')
                                
                                
            div.d-flex.justify-content-center
                 button.button.button_primary.button_lg(type='submit') Отправить заявку

<template>

onSingup() {
                this.$store.dispatch('singUp', {
                    email: this.email,
                    password: this.password
                })

                this.email = "";
                this.password = "";
            },

Answer 1

[Evgeny Kulakov]

Нужно добавить входной параметр value в компонент, v-model его использует для установки значения:

props: {
         // ...
            value: {
                type: String,
                required: true
           }
}

input.form-group__field(:type='type' :id='name' :name='name' autocomplete='off' ref='field' @focus='onFocus()' @blur='onBlur()' @input='onInput()' :value="value")

Comments

[Ilya]

Спасибо за помощь!