Vuetify: [Bug Report] v-data-table does not display boolean values

Created on 15 Aug 2019  路  5Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.7
Last working version: 1.5.17
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Took codepen from your documentation (first example) and changed a couple values for the "fat" property to true or false, and nothing displays in those rows for the Fat column.

Expected Behavior

If you take the 1.5.17 version of the first codepen in documentation and do the same thing, "true" or "false" shows up.

Actual Behavior

nothing displays in those rows for the Fat column.

Reproduction Link

https://codepen.io/swaterhouse/pen/jONqzyX?&editable=true&editors=101

VDataTable has PR bug

Most helpful comment

<template v-slot:item.yourBoolean="{ item }">
     <v-icon>
    {{ item.yourBoolean ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline" }}
     </v-icon>
</template>

All 5 comments

Environment

Vuetify Version: 2.0.7
Last working version: 1.5.17
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Took codepen from your documentation (first example) and changed a couple values for the "fat" property to true or false, and nothing displays in those rows for the Fat column.

Expected Behavior

If you take the 1.5.17 version of the first codepen in documentation and do the same thing, "true" or "false" shows up.

Actual Behavior

nothing displays in those rows for the Fat column.

Reproduction Link

https://codepen.io/swaterhouse/pen/jONqzyX?&editable=true&editors=101

You can use template with v-slot prop inside data table.

I got this same issue, boolean used to display properly after upgrade not
Vuetify Version: 2.0.10
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: OS X

I tested with both True and False, same result.
template v-slot with prop is a working suggestion until this gets resolved, thanks 馃憤

Environment

Vuetify Version: 2.0.7
Last working version: 1.5.17
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Took codepen from your documentation (first example) and changed a couple values for the "fat" property to true or false, and nothing displays in those rows for the Fat column.

Expected Behavior

If you take the 1.5.17 version of the first codepen in documentation and do the same thing, "true" or "false" shows up.

Actual Behavior

nothing displays in those rows for the Fat column.

Reproduction Link

https://codepen.io/swaterhouse/pen/jONqzyX?&editable=true&editors=101

You can use template with v-slot prop inside data table.

Please give example how one would use v-slot to solve this?

<template v-slot:item.yourBoolean="{ item }">
     <v-icon>
    {{ item.yourBoolean ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline" }}
     </v-icon>
</template>
<template v-slot:item.yourBoolean="{ item }">
     <v-icon>
  {{ item.yourBoolean ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline" }}
     </v-icon>
</template>

Thank you! Works like a charm.

Was this page helpful?
0 / 5 - 0 ratings