VueJS - Element UI Input Component - Event handler "input" error

Question

I'm trying to create a custom component with VueJS & Element-UI and I'm getting a very annoying error when trying to enter data into the input field.

Below are the files & the contents related to the issue:

components.js file:

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 file:

<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>

Error I'm receiving in the Console:

Please point out if I'm being a fool, however I cannot for the life of me figure out what is going on.

Cheers, Tim

So, it appears to be related to el-input. When using input, all good. However, calling the el-input and attempting this, it doesn't work. So perhaps a different question would be: How do I add data values to an el-input when it is in a component? — Tim
– Tim, Commented Feb 22, 2018 at 17:55

Tim · Accepted Answer · 2018-02-23 04:24:04Z

2

Okay, I solved my problem.

Interestingly, the $event is the input value being provided when using el-input.

Rather than have: v-on:input="parseValue($event.target.value)"

I removed target.value and I had my value. v-on:input="parseValue($event)"

Not sure if I've done the wrong thing by VueJS here. However, this has resolved my issue.

edited Feb 23, 2018 at 4:24

answered Feb 22, 2018 at 18:17

Tim

1861 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS - Element UI Input Component - Event handler "input" error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related