CODEWITHSUNDEEP
vue.jsvuetify.js
sonoerin
sonoerin

Reputation: 5185

Vuetify to show icon in v-data-table

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 }
      ],

...

}

Upvotes: 2

Views: 5228

Answers (1)

Oleg Naumov
Oleg Naumov

Reputation: 587

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Upvotes: 2

Related Questions