Vuetify data table with nested data and v-slot:item

3
votes

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.

data table

Does anyone know what is missing?

1
vue.jsvuejs2vuetify.js
It looks like the code works locally. It could be a problem with codepen. – Tom

1 Answers

3
votes

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:

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>