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

Question

如何在 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"}]
        }

小提琴： https://jsfiddle.net/m09uLgaz/1/

Answer 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 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 中有该引用。同样在对象 inner 中使用 true 和 false 作为布尔值而不是字符串。

编辑JSFiddle链接https://jsfiddle.net/0pw3264a/

更新了自定义排序的小提琴https://jsfiddle.net/qtLujh0e/