vue.js - 使用嵌套数据和 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>