In the Vuetify data table, table column with slot template

Question

In the Vuetify data table, for table column with slot template is it possible to use column name with Camel casing, currently supporting only column names, with lower case in the model for example

This does not work:

   <template v-slot:item.firstName="{item}">
       <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
   </template>

This works :

   <template v-slot:item.firstname="{item}">
       <span>{{item.prefix}} {{item.firstname}} {{item.lastname}} </span>
   </template>

My data model is having properties like this.

contactsList: {
  {lastName : "Ray",
  firstName : "Sam",
   prefix : "Dr."},
  {lastName : "Bank",
   firstName : "Paul",
   prefix : "Jr."}}

Answer 1

I played bit around and I don't know the exact cause but itseems more related to the headers. As long as you place the headers in lowercase the issue doesn't appear. You could even capitalize every letter in the slot

HTML:

<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="items"
      >

      <template v-slot:item.firstNaMe="{item}">
          <span>test1</span>
      </template>

      <template v-slot:item.Lastname="{item}">
          <span>test2</span>
      </template>

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

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        {firstName: 'John', Lastname: 'Doe' },
        {firstName: 'Jane', Lastname: 'Doe' }
      ],
      headers: [
        { text: 'first name', value: 'firstname' },
        { text: 'last name', value: 'lastname' }
      ],
    }
  },
})

Codepen: https://codepen.io/reijnemans/pen/oNvQKje?editors=1010

Answer 2

Pass props instead of { item } for the v-slot prop assignment.

This way you don't have to funk with the header.value; enter the key name as is without having to consider the alpha-case. Note: you do have to set to lower-case when you want to pass an Object.

Before (i.e. example in OP Question):

<template v-slot:item.firstName="{item}">
  <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
</template>

After:

<template v-slot:item.firstName="props">
  <span>{{props.item.prefix}} {{props.item.firstName}} {{props.item.lastName}} </span>
</template>