Vue.js event handling (SOLVED)

I am doing the official Vue.js tutorial

https://www.vuemastery.com/courses/intro-to-vue-js/event-handling

and following it step by step.
I created a button with a click event

 <button v-on:click="addToCart">Add to Cart</button>
 <p class="cart">Cart: {{ cart }}</p>
var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    inStock: true,
    details: ["80% cotton", "20% polyester", "Gender-neutral"],
    cart: 0,
    methods: {   
      addToCart: function() {
        this.cart += 1;
        console.log('jkdsdb');
      },
    }
  }
});

and I get an error in the console

ReferenceError: addToCart is not defined
at ln.eval (eval at wa (vue:6), :3:995)

I checked different websites, checked and even copied their examples, but the methods are always not defined. When I comment them out in html, the error disappears, so it’s something in the html file.
Can anyone help? Did you get a similar error?

1 Like

Didja compare it to the tutorial codepen?
https://codepen.io/VueMastery/pen/YazNqJ?editors=1010

Spoiler: solution codepen:
https://codepen.io/VueMastery/pen/eMYgMG?editors=1010

2 Likes

Oh thank you so much!!
I found my mistake by checking your first link. It wasn’t extremely clear from the tutorial that data and methods are two different objects. Thank you!

2 Likes

Thanks, was stuck too!