在虚拟dataTable上显示布尔值

Question

我用vue vuetify创建了一个数据表，并从我的api服务器中获取数据。在我的表中，除了布尔值之外，一切都是显示的。

你能帮我看清楚吗？

表组件

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

在我收到的对象中，'on‘键是一个布尔值。我有全部显示，但在“on”栏中没有显示

这就是我对道具所做的

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

​

​

Answer 1

使用方法处理和打印数据。

尝尝这个。

<td class="text-xs-right">{{ computedOn(props.fixture.on) }}</td>

export default {
  methods: {
    computedOn (value) {
      return String(value)
    }
  }
}

更新

由于验证错误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);
    });
  }
}