Vuetify Datatable item.<name> template not being applied - but other templates are fine

Question

Edit 1: I have added a codepen here.

I have a simple datatable:

<v-data-table 
    :items="filteredSpecialOrders" 
    :headers="headers" 
    :loading="isLoading"
    :group-by="groupby" 
    :footer-props="footerprops"
    item-key="Id"
    show-expand
    >
    <template #expanded-item="{ headers, item }">
        <td :colspan="headers.length">
            The expanded-item template is working.  Customer is {{ item.Customer }}
        </td>
        </template>
        <template #top>
        <div>The top template is working</div>
        </template>
    <template #item.SubmittedDateSort="{ item }">
        broken 
    </template>
    <template #item.EtaWarehouseSort="{ item }">
        broken
    </template>
</v-data-table>

with these headers:

headers() {
    return [
        { text: 'Submitted', value: 'SubmittedDateSort', },
        { text: 'ETA to Whse', value: 'EtaWarehouseSort', },
        // and so on
    ]
},

This is the items from the computed() section:

modifiedSpecialOrders() {
    return this.specialOrders
        .map((spo) => {
            return {
                ...spo,

                SubmittedDate: spo.SubmittedDate && new Date(spo.SubmittedDate),
                SubmittedDateSort: spo.SubmittedDate && new Date(spo.SubmittedDate).getTime(),
                EtaWarehouse: spo.EtaWarehouse && new Date(spo.EtaWarehouse),
                EtaWarehouseSort: spo.EtaWarehouse && new Date(spo.EtaWarehouse).getTime(),
            };
        });

The EtaWarehouseSort is the result of new Date(datestring).getTime() - basically milliseconds for sorting.

The template is for providing a "human-readable" version of the date - but as you can see from the screenshot, all I'm ever seeing is the milliseconds. With the current template, all I should see is the word broken but I'm still seeing the milliseconds. I am at a loss for why this isn't applying the template.

Answer 1

I've looked at your codepen. I found out that the problem is linked with the use of PascalCase (camelCase as well) for header values. Although it works for displaying the data, you can't access the named slot in DOM template, since the browser will interpret any upper case symbol as lowercase. See this GitHub bug report and the Vue documentation page, with hints on this problem.

There are two solutions proposed: the first is obvious - convert all headers' value key to lowercase. Second, use string templates with which I'm not very familiar.