4
votes

I made a data table with vue vuetify and I fetch my data from my api server. In my table, everything is display except boolean.

Can you help me to see clearer

Table component

<template>
    <v-data-table
            :headers="headers"
            :items="fixture"
            :items-per-page="5"
            class="elevation-10"
    >

    </v-data-table>
</template>

<script>
    export default {
        name: 'my_fixtures',
        props: ['fixture'],
        data () {
            return {
                headers: [
                    { text: 'name',value: 'name'},
                    { text: 'State', value: 'on' },
                    { text: 'Group', value: 'group' },
                    { text: 'Recipe', value: 'recipe' },
                    { text: 'start', value: 'startDate' },
                    { text: 'end', value: 'endDate' },
                    { text: 'Action', value: 'action' },
                ],
                items: this.fixtures

            }
        }
    }
</script>

In the object that I receive , the key 'on' is a Boolean. I have all display , but nothing in the 'on' column

and this is what I do with props

<template>
    <v-container>
        <my_fixtures v-bind:fixture="fixtures"></my_fixtures>
        <router-view></router-view>
    </v-container>
</template>

<script>
    import my_fixtures from "./greenhouse/fixtures";
    export default {
        name: "my_client",
        data: function (){
            return {fixtures: []}
        },
        components: {my_fixtures},
        mounted() {
                http.get('fixture/client')
                    .then(result => {
                        this.fixtures = result;
                    })
                    .catch(error => {
                    console.error(error);
                });
        }
    }
</script>

Here the result Object

1
What does the response from fixture/client look like? If you just print out {{ props.fixtures}} in the items slot, what do you see?Trenton Trama
If I comment All the template with slot , I have the same thing, I thaink it works without slotTheDevGuy
I update my post with image of object fixture/clientTheDevGuy

1 Answers

0
votes

Process and print data using methods.

try this.


<td class="text-xs-right">{{ computedOn(props.fixture.on) }}</td>
export default {
  methods: {
    computedOn (value) {
      return String(value)
    }
  }
}

UPDATE

Modifying original data due to vuetify bug https://github.com/vuetifyjs/vuetify/issues/8554

export default {
  mounted() {
    http.get('fixture/client')
      .then(result => {
        this.fixtures = result.map(value => {
          value.on = String(value.on)
        })
      })
      .catch(error => {
        console.error(error);
    });
  }
}