带有嵌套数据和 v-slot:item 的 Vuetify 数据表 [英] Vuetify data table with nested data and v-slot:item

问题描述

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

这是我的代码:

有谁知道遗漏了什么?

解决方案

这在 DOM 模板解析注意事项，但 HTML 标签和属性不区分大小写.在 Codepen 中，您使用 DOM 作为模板，因此 v-slot:item.nested.nestedCalories 属性变为小写(v-slot:item.nested.nestedcalories).如果您将 headers 中的值更改为小写，您会发现它有效.

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

• .vue 文件
• 模板选项
• <脚本>常量应用 = {模板: '#app-template',数据:() =>({标题: [{文本:'甜点'，值:'名称'}，{文本:'卡路里'，值:'卡路里'}，{文本:'嵌套卡路里'，值:'nested.nestedCalories'}，],甜点:[{name: '酸奶',卡路里:100，嵌套:{nestedCalories:100}，},{name: '冰淇淋',卡路里:200，嵌套:{nestedCalories:200}，},{name: 'Eclair',卡路里:300，嵌套:{nestedCalories:300}，},],})}新的 Vue({vuetify: 新的 Vuetify(),渲染:h =>h(应用程序)}).$mount('#app')

  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?

  解决方案

  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>
  

  这篇关于带有嵌套数据和 v-slot:item 的 Vuetify 数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！