Показать логическое значение на Vuetify dataTable - PullRequest
Новая
       11

Показать логическое значение на Vuetify dataTable

0 голосов
/ 08 октября 2019

Я создал таблицу данных с помощью 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 'это логическое значение. У меня все отображается, но ничего в столбце «вкл.»

, и это то, что я делаю с реквизитом 

<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 Ответ

0 голосов
/ 08 октября 2019

Обработка и печать данных с использованием методов.

Попробуйте это. 


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

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

ОБНОВЛЕНИЕ

Изменение исходных данных из-за vuetifyошибка 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);
    });
  }
}
...