event on button not working in vue-datatable

Question

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');
          },

tony19 · Accepted Answer · 2022-07-16 04:43:42Z

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.

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 ?

edited Jul 16, 2022 at 4:43

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 11, 2021 at 13:39

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3653474 Over a year ago

yes its same link npmjs.com/package/vuejs-datatable that i have used, i have seen multiple links link stackoverflow.com/questions/47202998/… where events cannot be called on dynamic created elements

kissu Over a year ago

Wow, looking on how hacky it looks from the beginning I'd rather avoid this one.

user3653474 Over a year ago

Yes it is complex, because it was already implemented in my projects, Is there any solution to call click event here

kissu Over a year ago

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

Collectives™ on Stack Overflow

event on button not working in vue-datatable

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related