具有嵌套数据和 v-slot:item 的 Vuetify 数据表答案

【问题标题】：Vuetify data table with nested data and v-slot:item具有嵌套数据和 v-slot:item 的 Vuetify 数据表
【发布时间】：2023-03-12 20:35:01
【问题描述】：

我想创建一个包含嵌套数据的 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 不起作用。

有人知道缺少什么吗？

【问题讨论】：

看起来代码在本地工作。这可能是 codepen 的问题。

标签： vue.js vuejs2 vuetify.js

【解决方案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>

【讨论】：