Vue 2 - Flexgrid - Column of buttons > onclick not working in format-item

Vue 2 - Flexgrid - Column of buttons > onclick not working in format-item

Posted by: eric.devwise on 3 April 2019, 4:50 pm EST

• 

  eric.devwise

  • Post Options:
  • Link
    Copy

  Posted 3 April 2019, 4:50 pm EST

  I have a column of buttons that I want to trigger an event onclick. I am using and the button is displaying. However, in the formatshoeID() method I put onclick=“test()” and it’s not triggering test.

  Seems like it should be simple enough. Can I use onclick? Can I use vueJS @click?

  Here is the formatShoeId() and test():

  
  methods: {
              formatShoeID: function (s, e) {
                  var flex = s;
                  if (e.panel == flex.cells && flex.columns[e.col].binding == 'ShoeId') {
                      e.cell.innerHTML = wijmo.format(
                          '<a href="#">{ShoeId}</a>',
                          flex.rows[e.row].dataItem);
                  } else if (e.panel == flex.cells && flex.columns[e.col].binding == 'create_listing') {
                          e.cell.innerHTML = wijmo.format(
                          '<button onclick="test()" class="testBtn">Create Listing</button>',
                          flex.rows[e.row].dataItem);
                  }
              },
              test: function() {
                  console.log('test is working');
              }
  }
  
  
  

• 

  eric.devwise

  • Post Options:
  • Link
    Copy

  Posted 3 April 2019, 4:52 pm EST - Updated 3 October 2022, 8:07 pm EST

  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 4 April 2019, 7:19 am EST

  Hello,

  The error is thrown because when we use “onclick” for handling click event, the DOM searches for the method in the script of the page instead of the .vue file. To handle click event using Vue method, you need to add an event listener to the grid itself. Please refer to the sample demonstrating the same:

  https://codesandbox.io/s/k0wz3v2y95