[Vuejs]-Use vue.js component to count up a data value

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.

Leave a comment