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/

的更新小提琴

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

1 个答案: