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