Почему не работает v-model для компонента?

Question

[Ярослав Савинов]

У меня есть компонент инпут, использую его на своей странице. Мне необходимо чтобы значение его value связывалось с пропсом email на моей странице, но почему-то не работает. Значение как было пустым по умолчанию, так и остается.
Вот код инпута:

<template>
                <my-input :placeholder="phEmail" v-model="email" :value="email"></my-input>
            <my-btn class="loginBtn" :text="text" @click="sendData"></my-btn>
</template>

<script>
    import MyBtn from '@/components/UI/MyButton.vue';
    import MyInput from '@/components/UI/MyInput.vue';
    export default {
        components: {MyBtn,, MyInput},
        data() {
            return {
                phEmail: 'Введите адрес эл. почты',
                email: '',
            }
        },
        methods: {
            sendData() {
                console.log("Email value on sendData:", this.email);
                console.log(this.email);
                // if (this.email.length > 0 && this.email.length <= 100) {
                //     this.email = '';
                // }   else {
                //     this.email = '';
                //     this.phEmail = 'недопустимая длина';
                // }
            }
        }
    }
</script>

вот код компонента инпут:

<template>
    <input class="inputBlock" @input="updateValue" :placeholder="placeholder" :value="value">
</template>
<script>
    export default {
        props: {
            placeholder: {
                type: String,
                required: false,
                default: '',
            },

            value: {
                type: String,
                required: false,
                default: '',
            },
        },
        methods: {
            updateValue(event) {
                console.log("Emitting input event with value:", event.target.value);
                this.$emit('input', event.target.value);
            }
        }
    }
</script>

Comments

[Сергей delphinpro]

<template>
    <input class="inputBlock" @input="updateValue" :placeholder="placeholder">
</template>

:value где?

[Ярослав Савинов]

Сергей delphinpro, добавил. оно и до этого было, просто не работало, что с value, что без

[0xD34F]

v-model="email" :value="email"

На хрена тут :value?

components: {MyBtn,, MyInput},

Это как вообще родилось? Что, задавая вопрос код руками перепечатывали?

Answer 1

[0xD34F]

Версия vue какая?

Если 3, то всё ясно:

BREAKING: When used on custom components, v-model prop and event default names are changed:

• prop: value -> modelValue;
  
• event: input -> update:modelValue;
  

Если 2 - явных косяков не видно, воспроизводите проблему в песочнице, ссылку сюда.

Comments

[Ярослав Савинов]

спасибо огромное! У меня Vue 3, правда помогло)