Warning in vue dev tool

Question

I have a project and in project i have 3 file :

1 . index.html

2 . main.js

3 . Vue.js (Vue library)

My index.html:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div id="root" class="container">
        <coupon @applied="OnCouponApplied"></coupon>
        <h1 v-show="couponApplied">applied</h1>
    </div>
    <script src="../index/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

And my main.js :

    window.Event=new Vue();

Vue.component('coupon',{
    name:'coupon',
    template:'<input placeholder="enter you`r code" @blur="OnCouponApplied">',
    methods:{
        OnCouponApplied(){
            Event.$emit('applied');
        }
    }
});
new Vue({
    el:'#root',
    data:{
        couponApplied:false
    },
    created(){
        Event.$on('applied',()=>alert('handle!'));
    }
});

But I have two warnings:

Warnings :

vue.js:597 [Vue warn]: Property or method "OnCouponApplied" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https‍://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

vue.js:597 [Vue warn]: Invalid handler for event "applied": got undefined

found in

---> <Coupon>
<Root>

It work correctly and now I want too know is there any solution to these warnings?

In the body, <coupon @applied="OnCouponApplied"></coupon> is using OnCouponApplied which doesn't exist in the root Vue instance — Emile Bergeron

Unknown Unknown · Accepted Answer · 2018-05-31T14:47:10

in the main.js we don't have OnCouponApplied in Vue instance.

so i delete OnCouponApplied in index.html.

And fix a main.js to have better View(Don't use $emit and $on) :

window.Event=new class{
    constructor(){
        this.vue=new Vue();
    }
    fire(event,data=null){
        this.vue.$emit(event,data);
    }
    listen(event,callback){
        this.vue.$on(event,callback);
    }
};

Vue.component('coupon',{
    name:'coupon',
    template:'<input placeholder="enter you`r code" @blur="OnCouponApplied">',
    methods:{
        OnCouponApplied(){
            Event.fire('applied');
        }
    }
});
new Vue({
    el:'#root',
    created(){
        Event.listen('applied',()=>alert('handle!'));
    }
});

Warning in vue dev tool

1 Answers