Just diving into Vue.js and I have a specific requirement.
I need to attach events to a generic button template.
I attempted to do so using the following approach.
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>'
});
Unfortunately, the click event is not being triggered. Any suggestions on how to dynamically bind a click event to a generic button template?
Edit:
@Saurabh
I followed your advice and here is the implementation 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>'
});
Even after this modification, the functionality is not working. Any insights on where I might be going wrong?