Topic: Datatable row button click
                  
                  ozgehan
                  premium
                  asked 5 years ago
                
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,
                      
                      Magdalena Dembna
                      staff
                        answered 5 years ago
                    
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
- ForumUser: Premium
 - Premium support: Yes
 - Technology: MDB Vue
 - MDB Version: 6.7.1
 - Device: computer
 - Browser: chrome
 - OS: windows
 - Provided sample code: No
 - Provided link: Yes