Предупреждение в Vue Dev Tool - PullRequest
Новая
       5

Предупреждение в Vue Dev Tool

0 голосов
/ 31 мая 2018

У меня есть проект, и в проекте у меня есть 3 файла:

1.index.html

2.main.js

3.Vue.js (библиотека Vue)

Мой 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>

И мой 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!'));
    }
});

Но у меня два предупреждения:

предупреждения : 

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>

Это работает правильно, и теперь я хочу знать, есть ли какое-либо решение для этих предупреждений !!?!?

1 Ответ

0 голосов
/ 31 мая 2018

в main.js у нас нет OnCouponApplied в экземпляре Vue.

, поэтому я удаляю OnCouponApplied в index.html.

и исправляю main.js виметь лучший вид (не используйте $ emit и $ 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!'));
    }
});
...