Emitting custom events on components

Question

I am following Component Basics guide on vuejs.org, but I cannot produce the result as guided. I don't know whether to put the methods property on component or on root Vue instance.

When I put method onIncreaseCount inside component, an error is thrown.

error

But when I put method onIncreaseCount inside root Vue instance, although there is no error, nothing is applied when I click the button.

// JS Vue.component('button-counter', { data: function(){ return {count: 0} } template: `<button v-on:click="$emit('increase-count')">You clicked me {{ count }} times.</button>`, methods: { onIncreaseCount: function(){ this.count++ } } }) new Vue({ el: "#main" }) // HTML <main class="main" id="main"> <button-counter title="Example component" @increase-count="onIncreaseCount"></button-counter> </main>

I expect the {{ count }} value will be increased each time I click the button, but it doesn't change.

Read documentation here vuejs.org/v2/guide/events.html

Maxim
– Maxim

2018-12-25 10:10:06 +00:00
Commented Dec 25, 2018 at 10:10 — Maxim
– Maxim, Commented Dec 25, 2018 at 10:10

Farhad Azarbarzinniaz · Accepted Answer · 2018-12-24 12:07:42Z

you don't need any emit jsut you have to call the increase function

handle in component itself

// JS Vue.component('button-counter', { data: function(){ return {count: 0} } template: `<button v-on:click="increaseCount">You clicked me {{ count }} times.</button>`, methods: { increaseCount: function(){ this.count++ } } }) new Vue({ el: "#main" }) // HTML <main class="main" id="main"> <button-counter title="Example component"></button-counter> </main>

Yes, it seems like I misunderstood the concept of emitting. It is used to communicate between the component and the parent instance (parent component or in this guide, the root instance).

Collectives™ on Stack Overflow

Emitting custom events on components

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related