I want to delete the specific record from the tables based on the selection a user makes. For example, if the user selects any 3 options then a delete button should appear, and that delete button should allow deleting those specific records. The same goes for the scenario if the user selects all the rows. Right now unable to grab the id of the rows that are selected.
<v-btn v-show="deleteBtn" color="danger white--text" >
<v-icon>mdi-delete</v-icon>
</v-btn>
<v-data-table
fixed-header
:v-model="selected"
@input="enterSelect()"
:headers="headers"
:items="company"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
checkboxColor="red"
>
<template v-slot:item.option="props">
<v-icon class="mx-1" fab dark color="success darken-3" @click="onButtonClick(props.item)">mdi-circle-edit-outline</v-icon>
<v-icon class="mx-1" fab dark color="danger" @click="onButtonClick(props.item)">mdi-delete-outline</v-icon>
</template>
</v-data-table>
export default{
data:()=>{
return{
singleSelect: false,
deleteBtn:false,
selected: [],
headers: [
{
text: 'Company Name',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Email', value: 'email',},
{ text: 'Contact Number', value: 'contact', },
{ text: 'Country', value: 'country', },
{ text: 'Parent Company ', value: 'parent', },
{ text: 'Option', value: 'option', },
],
company: [
{
id:1,
name: 'Justice League',
email: '[email protected]',
contact: '01287(7643)',
country: 'Metroplis',
parent: 'Wayne Industries',
},
{
id:2,
name: 'Teen Titans',
email: '[email protected]',
contact: '01287(7643)',
country: 'Metroplis',
parent: 'Wayne Industries',
},
{
id:3,
name: 'Titans',
email: '[email protected]',
contact: '01287(7643)',
country: 'Central City',
parent: 'Wayne Industries',
},
{
id:4,
name: 'Team Flash',
email: '[email protected]',
contact: '01287(7643)',
country: 'Central City',
parent: '-',
},
{
id:5,
name: 'Team SuperGirl',
email: '[email protected]',
contact: '01287(7643)',
country: 'Central City',
parent: 'Superman',
},
{
id:6,
name: ' SuperGirl',
email: '[email protected]',
contact: '01287(7643)',
country: 'Central City',
parent: 'Superman',
},
],
}
},
methods:{
//this selects the hides and shows the delete button when all data are seleted
selectAll(){
this.deleteBtn=!this.deleteBtn;
},
//also there should be method that triggers the delete button when single checkbox is selected
onButtonClick(tr){
console.log(tr.id);
},
enterSelect() {
console.log(this.selected.map(e => e.name)); // logs all the selected items.
}
}
}
When you select the items it gets saved in the selected variable which is what v-model (two-way binding) does.
For example, if you select any two items, the selected variable's output will look like this-
[ { "id": 2, "name": "Teen Titans", "email": "[email protected]", "contact": "01287(7643)", "country": "Metroplis", "parent": "Wayne Industries" }, { "id": 1, "name": "Justice League", "email": "[email protected]", "contact": "01287(7643)", "country": "Metroplis", "parent": "Wayne Industries" }, { "id": 3, "name": "Titans", "email": "[email protected]", "contact": "01287(7643)", "country": "Central City", "parent": "Wayne Industries" } ]
If you will select all items, selected variable will hold all items inside it. You can console your selected variable to understand more.
Now, on the delete button's click, call your function, and simply parse the ids from this array of objects using any suitable method. For example, using foreach-
deleteRecords() {
this.selected.forEach(item => {
// YOUR API METHOD AND PASS ID IN IT
// api_req.delete(item.id)
})
}
Using map function-
deleteRecords() {
// create only ids array
let ids = this.selected.map(item => item.id);
// Loop on ids
ids.forEach(id => {
// YOUR API METHOD AND PASS ID IN IT
// api_req.delete(id)
})
}
If your API supports multiple items deletion, then you can directly send the map function output to your API-
let ids = this.selected.map(item => item.id);
api_req.delete(ids)