CODEWITHSUNDEEP
vuejs2
Tyler Bean
Tyler Bean

Reputation: 437

Emitting custom events on components

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.

Upvotes: 0

Views: 62

Answers (1)

Farhad Azarbarzinniaz
Farhad Azarbarzinniaz

Reputation: 739

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>

Upvotes: 2

Related Questions