javascript - Referring to `this` vue component within an event handler - Stack Overflow

admin管理员组

文章数量:1321834

Given this Vue ponent that attaches a global event listener:

var app = new Vue({
    data: {
        foo: 0;
    },
    methods: {
        handle: function(e) {
            this.foo = 1; // this refers to handler, not app
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

What is the correct way to refer to this from within the event handler in order to update the ponent state? Alternatively, is there a better way to set event handlers on the entire window?

Given this Vue ponent that attaches a global event listener:

var app = new Vue({
    data: {
        foo: 0;
    },
    methods: {
        handle: function(e) {
            this.foo = 1; // this refers to handler, not app
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

What is the correct way to refer to this from within the event handler in order to update the ponent state? Alternatively, is there a better way to set event handlers on the entire window?

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow edited May 30, 2020 at 15:19 Yuval Adam asked May 30, 2020 at 14:59 Yuval AdamYuval Adam 165k9595 gold badges317317 silver badges404404 bronze badges 5

• Does How to access the correct this / context inside a callback? apply to Vue? – Bergi Commented May 30, 2020 at 15:02
• 1 actually this is binded to the vue instance – Ilijanovic Commented May 30, 2020 at 15:15
• @Ifaruki I believe you are correct and that my assumption about this is plain wrong! If you add this as an answer I'll accept it since it is correct. – Yuval Adam Commented May 30, 2020 at 15:23
• @YuvalAdam i dont unerstand the question because i have recreated this little app and it works fine – Ilijanovic Commented May 30, 2020 at 15:24
• Did you try just like this mounted: function() { var ctx=this; window.addEventListener("keypress", ctx.handle); } – Sultan Zhumatayev Commented May 30, 2020 at 18:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Actually this is binded to the vue instance and your code works fine.

var app = new Vue({
    el: "#app",
    data: {
        foo: 0
    },
    methods: {
        handle: function(e) {
            this.foo++; 
            console.log(this.foo);
        }
    },
    mounted: function() {
        window.addEventListener("keypress", this.handle);
    }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
{{ foo }}
</div>

The mon mistake is if you have for example an function with an callback and you try to use this inside the callback, it will be undefined

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo); //undefined
        })
        console.log(this.foo);
    }

You could either use arrow functions

    handle: function(e) {
        this.foo++; 
        setTimeout(() =>{
           console.log(this.foo);
        })
        console.log(this.foo);
    }
},

Or if its need to be backwards patible you could use .bind()

    handle: function(e) {
        this.foo++; 
        setTimeout(function(){
           console.log(this.foo);
        }.bind(this))
        console.log(this.foo);
    }
},

Your data property should be a function, not an object.

data(){
 return {
  foo: 1
 }
}

本文标签： javascriptReferring to this vue component within an event handlerStack Overflow