Vue.js Vuetify使用v-data-table中的v-for访问Vue实例数据

如何在Vuetify的v-data-table中使用v-for访问Vue实例数据

问题：表格标题2下未显示数据

<v-data-table
      :headers="headers"
      :items="tabular.table" :hide-actions="true"
      class="elevation-1"
    >
      <template v-slot:items="props" v-for="(table, index) in tabular.table" >
        <td :class="{'warn' : warning(index)}">{{ props.item.name }}</td>
        <td v-for="inner in table.inner" :class="{'warn' : !inner.data}">{{ props.item.inner.data }}</td>
      </template>
    </v-data-table>

tabular:{table: [
        {
          name: 'Table Data 1',
          inner: [{data: "false"}]
        }

小提琴：

---

您应该使用

<template v-slot:items="props" v-for="(table, index) in tabular.table">
    <td :class="{'warn' : warning(index)}">{{ props.item.name }}</td>
    <td v-for="inner in props.item.inner" :class="{'warn' : !inner.data}">{{ inner }}</td>
</template>

而不是

<td v-for="inner in table.inner" :class="{'warn' : !inner.data}">{{ props.item.inner.data }}</td>

您不需要使用props.item.inner，因为您在inner中有该引用。此外，在对象内部，将true和false用作布尔值，而不是字符串

编辑的JSIDLE链接

---

更新了自定义排序的fiddle

使用字符串false设置表的inner.data。尝试使用boolean:internal:[{data:false}]进行更改。我尝试过，表头2仍然不显示数据。数据即将出现，但排序不起作用。为什么会这样？因为当我们通过对象属性访问元素时，元素不是基元类型。对于桌子来说，它仍然是一个对象。您必须使用自定义排序道具对该列进行排序您能用它更新小提琴吗？不知道自定义排序。我已更新小提琴以显示自定义排序。如果回答了您的原始问题，请接受答案。此外，在提出此类问题之前，请尝试阅读文档，否则将来可能不会很受欢迎。