Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] v-data-table does not display boolean values #8554

Closed
sw34 opened this issue Aug 15, 2019 · 6 comments · Fixed by #8562, socialsoftware/quizzes-tutor#55 or drakeg/vue_learn#9
Closed
Assignees
Labels
C: VDataTable VDatatable S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected

Comments

@sw34
Copy link

sw34 commented Aug 15, 2019

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

@ghost ghost added the S: triage label Aug 15, 2019
@jacekkarczmarczyk jacekkarczmarczyk added C: VDataTable VDatatable S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected and removed S: triage labels Aug 15, 2019
@jacekkarczmarczyk jacekkarczmarczyk self-assigned this Aug 15, 2019
@rahultrivedi1800
Copy link

rahultrivedi1800 commented Aug 24, 2019

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.

@marinko-peso
Copy link

marinko-peso commented Aug 29, 2019

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 👍

@LouwrensP
Copy link

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?

@sw34
Copy link
Author

sw34 commented Oct 20, 2019

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

@LouwrensP
Copy link

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

johnleider pushed a commit that referenced this issue Nov 20, 2019
* fix(VDataTable): display non-string item values

fixes #8554

* fix: display empty cell for null/undefined

* test: update snapshots
@simonklimek

This comment was marked as outdated.

@vuetifyjs vuetifyjs locked as resolved and limited conversation to collaborators Jun 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
C: VDataTable VDatatable S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected
Projects
None yet
6 participants