add icons in actions columns and in each row - vue.js

Question

This is a vue.js project and this project is for a car sales company.
I have a table and this table contains information about each car as in the picture.
And as we note that for the table there is a header and there are lines under the head and are the Items which are the information of each car for each column.
And there is a column called Action, and within this column I want to put two icons, the first is delete and the second is edit.
Note that the data for the car information comes from the backend, which is node.js.
The problem is that I did not explore adding the delete and edit buttons on every line in the action column.
The question is, how can I add the Delete and Modify icons within the action column and on each line
How can I do this?
ViewAllCars.vue:
<template>
<v-app class="bg">
<v-container>
<v-card
class="mx-auto mt-5 pa-3"
max-width="100%"
id="limited-products"
:style="'border: 0px solid #D50000;'"
>
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
>
</v-data-table>
<!-- pagination -->
<div class="text-center pt-2">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
<v-text-field
:value="itemsPerPage"
label="Items per page"
type="number"
min="-1"
max="15"
#input="itemsPerPage = parseInt($event, 10)"
class="pl-7 pr-7"
></v-text-field>
</div>
</v-card>
</v-container>
</v-app>
</template>
<script>
import { mapGetters } from "vuex";
import GettersTypes from "../../store/types/getters-types";
export default {
data() {
return {
page: 1,
pageCount: 0,
itemsPerPage: 10
};
},
created() {},
computed: {
...mapGetters({
loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,
tableHeaders: GettersTypes.GET_HEADERS_TABLE_GETTER
}),
}
};
</script>
Within the state there is the header in the table, and these values ​​were used in Getter
state.js:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text" },
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "",
class: "red accent-4 white--text",
},
],
};
export default state;
Within Getter, the state was called that contains the header and other information coming from the backend.
getters.js:
import GettersTypes from '../types/getters-types'
const getters = {
[GettersTypes.GET_CAR_FORM_GETTER](state) {
return state.loadedCar;
} ,
[GettersTypes.GET_HEADERS_TABLE_GETTER](state){
return state.headers;
}
}
export default getters;

Answer 1

first give a value to Actions object in header:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text"},
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "actions",
class: "red accent-4 white--text",
},
],
};
export default state;
then use slots in your v-data-table like this:
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
>
<template #[`item.actions`]="{ item }">
<v-btn icon #click="edit(item.id)>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn icon #click="delete(item.id)>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
</v-data-table>
notice that # is shorthand for v-slot and I assumed that each car has an id in its object that you can pass that to edit and delete methods to perform the proper action on that car, you can pass any other argument you want like this: item.name
also vuetify has a good example on its site, check the link below:
vuetify data table CRUD actions example