Grabbing the id of single and multiple row selected in vuetify datatables using show select prop

Question

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.
        }
    }
}

Answer 1

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)

Answer 2

The solution that I generated is using input event:

 <v-data-table
   fixed-header
   @input="rowClicked"
   :headers="headers"
   :items="company"
   show-select

and created a function that i grabbing the ID's from the selected Rows

rowClicked(row) {
      if(row.length==0){
        this.deleteBtn=false;
        this.myselectedId=[];
      }
      else {
        var mynewArray=[];
        if(row.length==this.company.length){
          this.deleteBtn="Delete All";
        }
        else {
          this.deleteBtn="Delet Selected"
        }
        
        for (const key in row) {
          
            if (Object.hasOwnProperty.call(row, key)) {
              const element = row[key];
              const rowIds = element['id'];
              if ( !mynewArray.includes(rowIds) ) {
                mynewArray.push(rowIds); 
                }
            }
          } 
          this.myselectedId=mynewArray;
         
      }
      console.log(this.myselectedId);
     },