How to bind events to a generic button template in Vue JS?

Question

I am pretty new to Vue.js.

I have a requirement wherein I want to bind events to the generic button template.

I tried using the below method.

    Vue.component('ac-btn', {
    props: [
        'clickevent'
    ],
    methods: {
        greet: function () {
            alert("I am Called");
        }
    },  
    template: '<button type="button" :click="clickevent" class="btn btn-secondary btn-sm"><slot>button</slot></button>'
});

But the click even is not called. Any idea of how to bind the click event to generic button template dynamically?

Edit:

@Saurabh

I tried your suggestion above and below is how it looks in my project.

Vue.component('ac-parent', {
    methods: {
        greet: function () {
            alert("Hiey");
        }
    },
    template: `<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <div>
                <ac-child :onClick="greet">Custom value to replace generic slot value</ac-child>
            </div>
        </div>
     </div>`
});

Vue.component('ac-child', {
 template: '<button type="button" @click="clickevent" class="btn btn-secondary btn-sm"><slot>button</slot></button>'
});

Still this doesn't work. Am I doing something wrong?

Thanks @SaurabhGour for your quick reply. Yes, it should be :click="greet", but like I mentioned I want it to bind dynamically. So, anything that I pass into props.clickevent is the function that should bind to the button. — Parth Bhaidani
– Parth Bhaidani, Commented Jan 27, 2018 at 5:29

Nikola Spalevic · Accepted Answer · 2018-01-27 10:50:39Z

1

It's not good idea to pass callback through component prop :onClick="greet"... Better way is to emit event from child to parent component this.$emit('click', event), so you can catch this event in parent component and do something... After this you can use this button component like native button with <ac-child @click="greet">Custom Button</ac-child>

answered Jan 27, 2018 at 10:50

Nikola Spalevic

1,07713 silver badges18 bronze badges

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

Comments

Saurabh Gour · Accepted Answer · 2018-01-27 10:32:59Z

0

Please try using below code:

app.js

Vue.component('ac-parent', {
    methods: {
    greet: function () {
        alert("Hiey");
    }
},
template: `<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <div>
                <ac-child :onClick="greet">Custom value to replace generic slot value</ac-child>
            </div>
        </div>
    </div>
    </div>`
});

Vue.component('ac-child', {
    props: ['onClick'],   
    template: '<button type="button" @click="onClick" class="btn btn-secondary btn-sm"><slot>button</slot></button>'
});

new Vue({
    el: '#vue-app'
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>        
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <ac-parent></ac-parent>               
        </div>
    </body>
    <script src="./app.js"></script>
</html>

Do let me know in case you still face any issues

edited Jan 27, 2018 at 10:32

answered Jan 27, 2018 at 6:19

Saurabh Gour

7633 gold badges9 silver badges30 bronze badges

1 Comment

Parth Bhaidani Over a year ago

Thanks for your help. The idea suggested by @Nikola Spalevic worked for me.

Collectives™ on Stack Overflow

How to bind events to a generic button template in Vue JS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related