Vuetify data table with nested data and v-slot:item - vue.js

Question

I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data.
This is my code: https://codepen.io/blakex/pen/XWKWjaE
<v-data-table :headers="headers" :items="desserts">
<template v-slot:item.calories="{ item }">
<td>Slot works: {{ item.calories }}</td>
</template>
<template v-slot:item.nested.nestedCalories="{ item }">
<td>Nested slot works: {{ item.nested.nestedCalories }}</td>
</template>
</v-data-table>
data () {
return {
headers: [
{ text: 'Dessert', value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Nested Calories', value: 'nested.nestedCalories' },
],
desserts: [
{
name: 'Yogurt',
calories: 100,
nested: { nestedCalories: 100 },
},
...
],
}
}
As you can see, the v-slot:item.nested.nestedCalories doesn't work.
Does anyone know what is missing?

Answer 1

This doesn't seem to be mentioned in the DOM Template Parsing Caveats, but HTML tags and attributes are not case-sensitive. In Codepen you're using the DOM as a template, so the v-slot:item.nested.nestedCalories attribute becomes lowercase (v-slot:item.nested.nestedcalories). If you change the value in headers to lowercase you'll see that it works.
To avoid this you should always use string templates with Vue. String templates can be:
.vue files
The template option
<script type="text/x-template"> like the vuetify codepen template uses
Your code written with x-template looks like this:
<div id="app"></div>
<script type="text/x-template" id="app-template">
<v-app>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.calories="{ item }">
<td>Slot works: {{ item.calories }}</td>
</template>
<template v-slot:item.nested.nestedCalories="{ item }">
<td>Nested slot works: {{ item.nested.nestedCalories }}</td>
</template>
</v-data-table>
</v-app>
</script>
<script>
const App = {
template: '#app-template',
data: () => ({
headers: [
{ text: 'Dessert', value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Nested Calories', value: 'nested.nestedCalories' },
],
desserts: [
{
name: 'Yogurt',
calories: 100,
nested: { nestedCalories: 100 },
},
{
name: 'Ice cream',
calories: 200,
nested: { nestedCalories: 200 },
},
{
name: 'Eclair',
calories: 300,
nested: { nestedCalories: 300 },
},
],
})
}
new Vue({
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
</script>