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."}}

Does this answer your question? [Vuetify data table with nested data and v-slot:item](https://stackoverflow.com/questions/64241600/vuetify-data-table-with-nested-data-and-v-slotitem) — Kael Watts-Deuchar, Oct 25 '20 at 14:53

score 12 · Accepted Answer · edited Sep 18 '21 at 10:19

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

If you have a camel-case key without a slot, the cell will be empty ONLY when the `header.value` is assigned to lower-case transposition. So it seems the way to handle this, as far as this answer, is IF you have to slot something with a camel-cased `item` then assign the `header.value` to lowercase, OTHERWISE use the actual key case when assigning `header.value`. — seantunwin, Jan 15 '20 at 18:29

seantunwin · Answer 2 · 2020-01-15T20:39:45.467

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>

In the Vuetify data table, table column with slot template

2 Answers2