Skip to content
Advertisement

Adding the column name in the table and links in vue

I am beginner web developer. I make my first crud in Laravel 8 and Vue. I use this component t in my project: https://www.npmjs.com/package/vuejs-datatable

I have this code:

DataTable.vue:

JavaScript

Notes.vue:

JavaScript

This code work fine.

I have 2 problems:

  1. I would like the column headers in the table to be taken from: headers – currently these are the column names from the database (ie: columns).

  2. I would like to add a link to edit and delete a record. I have created methods: editLink (), deleteNote (). How can I add them to my table? I would like them to be visible next to the “name” column

How can I make it?

Please help me 🙂

Advertisement

Answer

For the problem #1. I would do it this way. Merge the columns and the headers as one Object, ex: where the key will be the column name (Important: don’t forget to register the headers prop).

JavaScript

In the DataTable:

JavaScript

For the Second problem #2 (Not very clear), Better to move these functions to the DataTable and add the actions as a new column, short example:

JavaScript

Add as prop in the DataTable:

JavaScript
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement