How to call a function that changes data from a component's event?

Question

JavaScript

https://jsfiddle.net/d918pasu/
the first button changes the data directly in the attribute (it works), the second one in the handler function (documentation ) and it doesn't work.
why inside increment as this is the window object and how to change the example so that you can change the data in the handler?

Answer 1

You are using an arrow function, it takes this from the lexical environment. You need it like this:

increment: function(num) {
            console.log(num, this);
            this.counter += num;
          }