Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Datatable row button click

ozgehan premium asked 4 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 ?

add button to datatable link

Thanks,


ozgehan premium answered 4 years ago


It worked with the solution you suggested.

Thank you


Magdalena Dembna staff answered 4 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`)
    }
  }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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
Tags