Topic: Datatable row button click
Hi,
I am trying to add a button to datatable. I managed to add a button to the datatable but can't define a click event. Can you help me on this matter ?
Thanks,
It's hard to tell without seeing your code, but I'm guessing you're passing HTML template as a string, like this:
{
name: "Tiger Nixon",
button: "<button class='btn btn-primary table-button'>See more</button>",
},
The problem is, this content will be rendered with v-html and @click won't work in this case. You can try using this workaround:
mounted() {
this.$nextTick(() => {
const buttons = document.getElementsByClassName('table-button');
buttons.forEach((button, i) => {
button.addEventListener('click', e => this.clickHandler(e, i))
})
})
},
methods: {
clickHandler(event, index) {
console.log(`button ${index} clicked`)
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: computer
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes