Question

我使用vue vuetify制作了一个数据表，并从api服务器中获取了数据。在我的表格中，除布尔值外，所有内容均显示。

您能帮我看清楚吗

表组件

var easyNum;

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

在我收到的对象中，键“ on”是布尔值。我已全部显示，但“上”列中什么都没有

这就是我对道具所做的

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

Answer 1

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

尝试一下。


<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);
    });
  }
}

在Vuetify数据表上显示布尔值

1 个答案: