Vue datatable button event malfunctioning

I'm currently working with the Vue.js datatable. Most functionalities are operational, however, I am facing an issue where the `callmethod()` is not being executed upon clicking a button. When the button is clicked, no events seem to be triggered. Any recommendations or suggestions would be greatly appreciated.

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

Answer №1

UPDATE: It appears that you are utilizing vuejs-datatable. However, there seems to be no provision for a callback function in the raw data. Therefore, it may not be feasible to implement it in this scenario. Consider directly incorporating it into your template as the official documentation does not mention such functionality.

Alternatively, explore other libraries that offer similar capabilities. With vuejs-datatable having only 147 stars, it may not be the most widely used option. I recommend exploring various solutions listed here: https://github.com/vuejs/awesome-vue#table

You can inspect attached listeners by selecting the component using Vue Devtools and checking its console for listeners.
https://i.sstatic.net/ERdq9.png


Are you referring to Vuetify's v-data-table, or another similar one? As there are numerous options available.

Furthermore, according to the official #data documentation, it states:

A general guideline is to treat data simply as data - observing objects with their own stateful behavior is discouraged.

It is advised not to manage any type of @click events within the data section. Are you certain that your library is designed to function in this manner?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initiating Axios requests after a period of time, such as a day, week, or

In my React project, I have implemented functions that make Axios calls to update a user's membership type in the database to daily, weekly, or monthly. The issue is that these changes must be manually reverted back to "Expired". Is there a way to cre ...

The time selector does not appear in the v-date-picker widget

I need help figuring out how to select a time range using v-date-picker on vCalender within my Vuetify project. Despite setting the mode of v-date-picker to dateTime, I am unable to find an option to choose the time along with the date. Is there something ...

Display text automatically if the user fails to click on the image after a certain period

I'm working on a jQuery code but I'm not sure how to achieve this specific functionality. I want the text to show up automatically after a few seconds if the user doesn't click on the image. Do you think adding animation-delay in CSS would b ...

The duplication of printed keys and values from a JavaScript object is causing issues

I am working with a JSON object structured like this: var data = { "2020-01-20": ["08:00 - 09:00", "09:00 - 10:00"], "2020-01-21": ["08:00 - 09:00"] }; My objective is to display each value along with its corresponding key in a list format, as follow ...

graphic map and paintbrush

I've implemented an image map using shape circles, but now I'm looking for a way to draw visible circles or icons on the map. Is there a solution for this issue? Currently, I have used a canvas overlay on the image to draw on it This method wo ...

Trying out a React component that relies on parameters for connection

Having an issue while attempting to test a connected react component that requires a props.params.id in order to call action creators. During the testing process, when checking if the component is connected to the store, an error "Uncaught TypeError: Canno ...

Add a button feature to both upload and download a todo list within a JavaScript file, similar to a text file

I'm looking to enhance my simple todo list with a download and upload function. I want to be able to save the list in local storage and then upload or download it from a server code. Below is a link to my code: https://jsfiddle.net/zahrashokri/uqkn6t ...

Transferring data packets via WebSocket

Imagine a scenario where you have a string consisting of ones and zeros, for example: "0101101" Now, the question arises - is there a way to transmit only these bits using the WebSocket.prototype.send method? The first step would be to convert these bit ...

Is there a way to prevent certain code from executing during server deployment?

First of all, my apologies for any mistakes in my English language skills. I find Morgan to be a great tool for development, but I am uncertain about deploying my server and not wanting everyone to see who is online. How can I prevent certain actions fro ...

What is the process for updating a document with two specific filter conditions?

I have a structure in my document that appears as follows: type Document = { _id: string title: string variants: VariantType[] } type VariantType = { timestamp: Int active: Boolean content: any[] } I am attempting to filter a document using ...

Working with a complex JSON structure in JavaScript exemplifies the use of loops

I am currently utilizing json.data.schedules[0].liveVideoList, json.data.schedules[1].liveVideoList, json.data.schedules[2].liveVideoList and so forth. Can someone please guide me on how to implement a loop to retrieve all paths? Here is the code in scri ...

I am interested in utilizing Sequelize, Vue, and Node to implement a query that filters data once it is retrieved to display on my view

Within my project, there's a table tracking user responses to a quiz. By utilizing the following query, I've successfully retrieved all the information from that table and stored it in my TotalQuizResponses array for display: this.totalQuizRespon ...

How can I extract the id of a clicked item and pass it to a different page with Jquery?

Facing an issue where the attribute value of a clicked href tag is not retained after browser redirection. Initially, when clicking on the href tag, the value is displayed correctly. However, upon being redirected to the peoplegallery_album, the id becomes ...

A guide on retrieving styled text from a database and displaying it in TinyMCE

I am encountering an issue where I need to retrieve formatted text from a database and display it in my TinyMCE editor. The content stored in the database looks like this: <p style="text-align: justify;"><strong>Zdrav&iacute;m</strong ...

Express is having trouble providing data to React

Currently, I am delving into mastering the realms of React and Express. My ongoing project involves crafting a learning application that fetches data from MySQL and renders it visually for analysis. To kickstart this endeavor, I set up a basic express ser ...

Why isn't my JavaScript variable visible in the HTML code?

I am currently facing an issue with my Angular app where I am trying to display a JavaScript variable in HTML. The variable successfully shows up in an older part of my application, but it fails to do so in the new section. Below is the functional code sn ...

React is re-rendering the identical div elements once more - Delving into the concept of

After reading about reconciliation in the React documentation, an interesting scenario crossed my mind. In my examples, I have code that involves using a button element to toggle a boolean value on click event. Based on this value, the code utilizes a ter ...

What is causing the onclick event to not function properly when called from an external .js file?

I've created a .js file that contains code for a photo album application. The file includes functions for changing images when buttons are clicked. However, when I interact with the buttons, the images do not change as expected. The code in the .js f ...

Using Promise.reject within an Ionic component's page

Within a component, I am invoking a service method that provides me with a Promise. Based on whether the promise is resolved or rejected, I need to perform different actions. This is how I am handling it: The code snippet responsible for calling the servi ...

JavaScript Conversion of Characters to ASCII Values

After converting a string input into a split array, I now need to convert that split array into ASCII for evaluation. Can someone provide guidance on how to do this? ...