0

I'm using vue datatable, functionalities are working except callmethod() is not called on button click. When i click button no events are fired. Any Suggestions Please.

export default{
  
        data(){
          return{
            columns: [
                        {label: 'name', field: 'name'},
                        {label: 'Link', representedAs: row => ` <button @click="callmethod(${row.id})"> </button>`, interpolate: true}, 
                        
                       
                    ],
                rows: [],
                page: 1,
                per_page: 10,
                filter:  '',
           }
        },
        methods:{
          callmethod()
          {
            console.log('function called');
          },
kissu
  • 40,416
  • 14
  • 65
  • 133
user3653474
  • 3,393
  • 6
  • 49
  • 135

1 Answers1

0

EDIT: it looks like you're using vuejs-datatable actually. Still, there is only a presence of raw data and nothing like a callback there, so it should probably not be possible to do it there. Try to rather do it directly into your template somehow since nothing in the official documentation is talking about this.

Or maybe look another library that will allow you to do that. There are plenty and what you're trying to do may be easier with another package. The one you're currently using (vuejs-datatable) do only have 147 stars, so not the most popular. I'd recommend checking all the solutions available here: https://github.com/vuejs/awesome-vue#table

You can see the attached listeners like this, select the component from your vue devtools then check it's listeners in the console.
enter image description here

You're talking about Vuetify's v-data-table or another one? Because there is a lot of them around..

Also, from the official #data docs, we can see that it says

A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.

You should not handle any kind of @click events into data so far. Are you sure your library is intended to work this way ?

tony19
  • 125,647
  • 18
  • 229
  • 307
kissu
  • 40,416
  • 14
  • 65
  • 133
  • yes its same link https://www.npmjs.com/package/vuejs-datatable that i have used, i have seen multiple links link https://stackoverflow.com/questions/47202998/vue-event-handler-on-dynamically-inserted-string-does-not-work where events cannot be called on dynamic created elements – user3653474 Feb 11 '21 at 13:53
  • Wow, looking on how hacky it looks from the beginning I'd rather avoid this one. – kissu Feb 11 '21 at 13:55
  • Yes it is complex, because it was already implemented in my projects, Is there any solution to call click event here – user3653474 Feb 11 '21 at 13:59
  • Ooh but nvm, it's not even answering the question to this specific package... So, I guess that you can try to maybe make something hacky and see if it somehow works. I've edited my answer on how to check if something do have a listener. You could start by your linked hacky solution and see if it works on a basic button, then try to plug it to your used package. Still, it heavily depends on how their `representedAs` and `interpolate` keys work. You could check the source code and maybe find a way. If it's even doable. If doable, I recommend using something more *clean*, especially for long term – kissu Feb 11 '21 at 14:09