带有嵌套数据和v-slot：item的Vuetify数据表

Question

我想用嵌套数据创建一个Vuetify表。问题在于v-slot：item似乎不适用于嵌套数据。

这是我的代码：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 },
      },
      ...
    ],
  }
}

如您所见，v-slot:item.nested.nestedCalories不起作用。

有人知道缺少什么吗？

Answer 1

DOM Template Parsing Caveats中似乎没有提到这一点，但是HTML标记和属性不区分大小写。在Codepen中，您使用DOM作为模板，因此v-slot:item.nested.nestedCalories属性变为小写（v-slot:item.nested.nestedcalories）。如果您将headers中的值更改为小写，则会看到它可行。

为避免这种情况，您应该始终在Vue中使用字符串模板。字符串模板可以是：

• .vue个文件
• template选项
• <script type="text/x-template">就像vuetify codepen template一样使用

您使用x-template编写的代码如下：

<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>