CODEWITHSUNDEEP
vue.jsvuetify.js
J. Doe
J. Doe

Reputation: 17

Vuetify access Vue instance data with v-for in v-data-table

How to access the Vue instance data using v-for inside Vuetify's v-data-table

Issue: Data not displayed under Table Header 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"}]
        }

fiddle: https://jsfiddle.net/m09uLgaz/1/

Upvotes: 0

Views: 1649

Answers (1)

AshTyson
AshTyson

Reputation: 493

You are supposed to use

<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>

Instead of 

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

You don't need to use props.item.inner because you have that reference in inner. Also in the object inner use true and false as Boolean and not as string.

Edited JSFiddle link https://jsfiddle.net/0pw3264a/

Updated fiddle for custom sort https://jsfiddle.net/qtLujh0e/

Upvotes: 1

Related Questions