[Vuejs]-Vuetify datatable not show custom cells with v-slot

by

0👍

After spending some time and play around with the v-data-table demo, I found that as long as the headers value is in lowercase the issue doesn’t appear.

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [{ text: 'Code', value: 'code' },
                { text: 'Business Name', value: 'businessname' },
                { text: 'Alias', value: 'alias' },
                { text: 'Is Direct', value: 'isDirect' },
                { text: 'Is Append File', value: 'isAppendFile' },
                { text: 'Notification', value: 'isSendEDINotification' },
                { text: 'Plant Name', value: 'plantName' },
                { text: 'Analyst Process', value: 'analystProcess' },
                { text: 'Supplier Type Name', value: 'supplierTypeName' },
                { text: 'Is Active', value: 'isActive' },
                { text: 'Action', value: 'action' }],
      supplierList: [{
        "supplierTypeId": 1,
        "name": "Transportista",
        "description": "Transportista",
        "isScrap": false,
        "isSystem": false,
        "isActive": true,
        "isDelete": false,
        "creationDate": "0001-01-01T00:00:00",
        "lastUpdate": "0001-01-01T00:00:00",
        "createdBy": 1,
        "lastUpdateBy": 0,
        "systemId": null,
        "sessionData": null,
        "item": null,
        "page": null,
        "size": null,
        "sortBy": null,
        "ascending": null,
        "alertNotification": null
      }],
    }
  }
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.14/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="supplierList"
      :items-per-page="5">
      <template v-slot:item.businessname="{item}">
          <span>Hola</span>
      </template>
    </v-data-table>
  </v-app>
</div>

Leave a comment