Vuetify 데이터 테이블에 데이터가 표시되지 않습니다.

Vuetify 데이터 테이블에 데이터가 표시되지 않습니다.

Vuetify 데이터 테이블은 데이터를 표시하지 않고 1개 중 1개 행이 표시되지만 테이블 본문은 비어 있습니다.내 컴포넌트 코드:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
  >
  </v-data-table>
</template>

<script>
export default {
  name: 'Users',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Fat (g)', value: 'fat' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          fat: 6.0,
        },
      ]
    }
  }
}
</script>

<style scoped  lang="stylus">
</style>

결과:

이걸 어떻게 고칠지 알아?

Vuetify 1.x 를 사용하고 있기 때문에, 스코프 슬롯을 가지는 템플릿을 추가할 필요가 있습니다.

  <v-data-table
    :headers="headers"
    :items="desserts"
  >
  <template v-slot:items="props">

      <td class="text-xs-right">{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>

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

또는 버전 2.0으로 업그레이드해야 합니다.버전 2.0은 다음과 같습니다.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

데이터 셀을 사용자 정의하려면 이 항목을 선택하십시오.

제 경우엔, 문제는 제가 이 모든 것을headers에 배치하다props대신 단면data그래서 심지어v-datatable가지고 있다items개체 배열로 설정된 속성(Vue Dev Tools, Chrome 확장자를 사용하여 확인할 수 있음)은 행을 표시하지 않습니다.

나는 머리를 찧으며 30분을 보냈지만 마침내 이 문제를 깨달았다.이사하자마자headers부터props로.data테이블에는 행이 표시되기 시작했습니다.이게 앞으로 누군가를 도울 수 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/57180521/vuetify-data-table-is-not-showing-data