How to handle arguments passed with $emit in vueJS 2?

Question

I am pretty new to VueJS. I want to emit an custom event on blur. I did it successfully but finding difficulty in catching the arguments passed with the emit in my root Vue instance. How do i go about it ?

<div id = "root">
    <coupon @applied = "checkApplied()"></coupon>
    <p v-if = "showText">Coupon code successfully applied</p>
</div>

Vue.component('coupon',{
    template : `
        <input type = "text" placeholder = "Enter the coupon" @blur="checkApplied($event.target.value)">
        `,

    methods : {
        checkApplied(value){
            console.log(value);
            this.$emit('applied',[value]);
        }
    }
});
var app = new Vue({
    el : '#root',
    data : {
        showText : false,

    },

    methods : {
        checkApplied(value){
            console.log(value);
            this.showText = true;
        }
    },

    }

})

As you can see when the applied event is emitted, i am passing it to function, Now how do i pass arguments that i got from @applied and pass it to checkApplied(). I did try this but it didn't workout @applied = checkApplied(value)

Answer 1

Instead of @applied=checkApplied(value) you need to do @applied=checkApplied($event)