VueJS — компонент ввода пользовательского интерфейса элемента — ошибка ввода обработчика событий

Я пытаюсь создать пользовательский компонент с помощью VueJS и Element-UI, и я получаю очень раздражающую ошибку при попытке ввести данные в поле ввода.

Ниже приведены файлы и содержимое, связанные с проблемой:

файл component.js:

Vue.component('yetti-input', {
    props: ['value'],
    template: '<el-input ref="input" v-bind:value="value" v-on:input="parseValue($event.target.value)"></el-input>',
    methods: {
        parseValue (value) {
            this.$emit('input', value)
        }
    }
})

файл index.vue:

<template>
    <div>
        <div class="login-form">
            <yetti-form>
                <yetti-input v-model="login.email"></yetti-input>
            </yetti-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                login: {
                    email: '',
                    password: ''
                }
            }
        }
    }
</script>

Ошибка, которую я получаю в консоли: введите здесь описание изображения

Пожалуйста, укажите, если я дурак, однако я не могу понять, что происходит.

Привет, Тим


javascript vue.js element-ui
person Tim    schedule 22.02.2018    source источник
comment
Таким образом, это, похоже, связано с el-input. При использовании ввода все хорошо. Однако вызов el-input и попытка сделать это не сработают. Поэтому, возможно, возникнет другой вопрос: как добавить значения данных в el-input, когда он находится в компоненте?   -  person Tim    schedule 22.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, я решил свою проблему.

Интересно, что $event — это входное значение, предоставляемое при использовании el-input.

Вместо того, чтобы иметь: v-on:input="parseValue($event.target.value)"

Я удалил target.value и получил свое значение. v-on:input="parseValue($event)"

Не уверен, что я сделал что-то не так с VueJS здесь. Однако это решило мою проблему.

person Tim    schedule 22.02.2018