VueJS - counter doesn't increase when I click the button

Question

I'm learning VueJS with Maximilian Schwarzmüller in his VueJS course on Udemy and whenever I run his example on my local machine, it doesn't increase my counter variable.

<div id="app">
  <button :click="increase">Click me</button>
  <p>{{ counter }}</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increase() {
        return this.counter++
      }
    }
  })
</script>

Any idea what's wrong with the code?

Thanks a lot.

Adam Orłowski · Accepted Answer · 2019-05-05 18:50:44Z

1

Data needs to be a function:

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        counter: 0
      }
    },
    ...
  })
</script>

edited May 5, 2019 at 18:50

answered May 5, 2019 at 18:17

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andris.vilde Over a year ago

data(): { isn't a valid syntax. There a unnecessary colon.

gokublack · Accepted Answer · 2019-05-06 11:52:40Z

0

You have to use the @ symbol for events, instead of : which is used for binding props.

<button @click="increase">Click me</button>

answered May 6, 2019 at 11:52

gokublack

1,4902 gold badges20 silver badges38 bronze badges

Comments

erroarr · Accepted Answer · 2019-05-05 18:43:22Z

0

try this:

data: () => ({
   counter: 0,
})

answered May 5, 2019 at 18:43

erroarr

112 bronze badges

Comments

andris.vilde · Accepted Answer · 2019-05-05 18:49:10Z

0

Your script will execute before your document is ready therefore Vue will not find your element to mount to.

Also as others already mentioned - your data property should be a function to make each instance with unique data object.

document.addEventListener('DOMContentLoaded', mountVue);

function mountVue() {
  new Vue({
    el: '#app',

    data() {
      return {
        counter: 0
      };
    },

    methods: {
      increase() {
        return this.counter++;
      }
    }
  });
}

answered May 5, 2019 at 18:49

andris.vilde

1885 bronze badges

Comments

Student22 · Accepted Answer · 2019-05-05 21:35:02Z

0

The problem was actually this:

<button :click="increase">Click me</button>

I was using the wrong short-hand syntax. I had to use the @ sign (for events) instead.

<button @click="increase">Click me</button>

I was looking at this example here on CodePen and I noticed that their data object is not a function. Must the data object be a function? Are their benefits that I don't know about?

I'm very new to Vue right now and I'm learning from Max's course on Udemy. Thanks a lot.

answered May 5, 2019 at 21:35

Student22

2,3095 gold badges27 silver badges35 bronze badges

2 Comments

NotABlueWhale Over a year ago

You indeed found the main problem by yourself. The single colon : is shorthand for v-bind, whereas the @ symbol is shorthand for v-on. It's important to use a function that returns an object for your data when there might be more than one instance of a Vue component. If you were allowed to use a regular object here, the values in this object would be shared across all instances. For example: if you were to have multiple instances of a counter, using the same data, they would all increase if you increased one of them.

NotABlueWhale Over a year ago

I took the same course quite a while ago, the topics you are wondering about are covered in the course. Lesson 26 is about vue directive shorthands. For now you don't really need to worry about using a function for your data, as the reasons for this will be extensively covered in section 7 of the course.

Collectives™ on Stack Overflow

VueJS - counter doesn't increase when I click the button

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related