Use vue.js component to count up a data value

Question

I am using vue.js and try to recreate the "Listening to Events" example. They use the following code:

HTML

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

JS

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

I want to do the same, but as its something I will do more often I want to create a component:

HTML

<div id="example-1">
  <counterButton></counterButton>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

JS

Vue.component('counterButton', {
  template: '<button v-on:click="counter += 1">Add 1</button>'
})

var example1 = new Vue({
  el: '#example-1',
    data: {
    counter: 0
  }
})

This does not seem to be working, while I receive the following warning:

[Vue warn]: Property or method "nextPage" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

As I am not used to javascript too much, I am simply not able to understand the error. I guess I have to somehow "link" the data value to my component?

This warning about something else, there is no nextPage property on your example. — Sardorbek Imomaliev
– Sardorbek Imomaliev, Commented Jun 22, 2017 at 6:40

tony19 · Accepted Answer · 2022-07-15 21:50:14Z

3

Your component should be called like below.

<counter-button></counter-button>

This will fix the warning and the button will appear. However, your counter will not change (not the way you are expecting it at least).

Reason

This is because now a button is a standalone component and it does not know about the counter of the parent component.

I recommend to take a look at the official documentation of VueJs about the components and they have a nice example of a counter.

Side note:

If you wish to reuse one button at multiple components to increase only one counter you will have to implement events or use Vuex. These are, however, a bit advanced topics and you should cover the basics first.

edited Jul 15, 2022 at 21:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 22, 2017 at 6:40

Duy Anh

7801 gold badge7 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Use vue.js component to count up a data value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related