0

HTML:

<div id="app">
  <button @click="inc">Counter</button>
  <h1>{{ counter }}</h1>
</div>

JS:

const view = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    inc: () => {
      ++this.counter
    }
  }
})

Receiving Cannot read property 'counter' of undefined when I click on the button. To me, this should work, but I'm new to Vue and wondering if I'm missing something obvious!

benhowdle89
  • 36,900
  • 69
  • 202
  • 331
  • http://jsbin.com/gazuyehebo/edit?html,js,output - in your example `this === window` (because of arrow syntax, so use es6 method definition shorthand instead) and there are no property called counter so you will got error. – Belmin Bedak Apr 03 '17 at 12:01
  • @BelminBedak I tested this on jsfiddle, it showed `undefined` on the console, surprised, as I was expecting `window` too. – Amresh Venugopal Apr 03 '17 at 12:07
  • @AmreshVenugopal good catch, probably vue change it to undefined to prevent creation of needless properties on window object. – Belmin Bedak Apr 03 '17 at 12:12

0 Answers0