Vuetify to show icon in v-data-table

user_1518668 0
Viewed 1157

I am new to Vue & Vuetify and am trying to solve a problem where I display a table, with some data. I would like a delete icon in the last column so some action is taken when they click. However, I cannot get the icon to display when the items are displayed. I can get either the data to display (using template or default :items) OR I can get the icon to display and respond to the click. I cannot get data and an icon to show at the same time.

Here is my Codepen: https://codepen.io/sonoerin/pen/ZEaRjOW

Here is my code sample:

 ...
 <v-data-table
       :headers="fobHeaders"
       :items="selected.scannedDevices"
       :items-per-page="5"
       class="elevation-1">
       <template slot="items" slot-scope="props">
         <tr>
           <td>{{ props.item.deviceType }}</td>
           <td>{{ props.item.role }}</td>
           <td>{{ props.item.status }}</td>
          <td>{{props.item.activationDate}}</td>
              
         <td> <v-icon large @click="deleteFob(props.item)"> mdi-access-point-remove </v-icon></td>
         </tr> 
         </template>
   </v-data-table>

...

data() {
   return {   

     fobHeaders: [
         { text: "Type", value: "deviceType", sortable: true },
         { text: "Role", value: "role", sortable: true },
         { text: "Status", value: "deviceStatus", sortable: true },
         { text: "Active Date", value: "activationDate", sortable: true },
         { text: "Action", value: "action", sortable: false }
      ],

...

}
vuetify.js vue.js
1 Answers

In your example, the template slot is declared incorrectly. There's no items slot in Vuetify's v-data-table. There is, however, a body slot that you can use to access the items. See more in the docs.

So when you declare your template slot incorrectly it's being ignored altogether, that's why your icon is not showing up (nothing is showing up actually).

This is the correct way to customize the rendering:

<template v-slot:body="{ items }">
  <tr v-for="item in items" :key="item.scannedDeviceId">
    <td>{{ item.deviceType }}</td>
    <td>{{ item.role }}</td>
    <td>{{ item.deviceStatus }}</td>
    <td>{{ item.activationDate }}</td>
    <td><v-icon large @click="deleteFob(item)"> mdi-access-point-remove </v-icon></td>
  </tr> 
</template>

Here is a working example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selected: {
        scannedDevices: [{
          "scannedDeviceId": "123",
          "deviceType": "laptop",
          "role": "Office Manager",
          "activationDate": "2020-05-11",
          "deactivationDate": "2022-02-22",
          "deviceStatus": "DEACTIVATED"
        }]
      },
      fobHeaders: [{
          text: "Type",
          value: "deviceType",
          sortable: true
        },
        {
          text: "Role",
          value: "role",
          sortable: true
        },
        {
          text: "Status",
          value: "deviceStatus",
          sortable: true
        },
        {
          text: "Active Date",
          value: "activationDate",
          sortable: true
        },
        {
          text: "Action",
          value: "action",
          sortable: false
        }
      ],

    }
  },
  methods: {
    deleteFob(item) {
      console.log("Delete item ID # " + item.scannedDeviceId);
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-data-table :headers="fobHeaders" :items="selected.scannedDevices" :items-per-page="5" class="elevation-1">
      <template v-slot:body="{ items }">
                <tr v-for="item in items" :key="item.scannedDeviceId">
                  <td>{{ item.deviceType }}</td>
                  <td>{{ item.role }}</td>
                  <td>{{ item.deviceStatus }}</td>
                  <td>{{item.activationDate}}</td>
                  
                  <td><v-icon large @click="deleteFob(item)"> mdi-access-point-remove </v-icon>
                  </td>
                </tr> 
               </template>

    </v-data-table>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

user_72647990
Related