Блог

Я пытаюсь заполнить datatable с помощью вызова axios. Однако я не могу фактически увидеть данные в таблице на моем сайте. Если я проверю таблицу, я увижу, что данные действительно есть, но не видны конечному пользователю. Есть мысли о том, что я здесь делаю не так?

компонент

     <template>
    <v-data-table 
                  :items="posts"
                  :items-per-page="5"
                  item-key="post_id"
                  hide-default-header
                  class="elevation-1"
                  :footer-props="{
      showFirstLastPage: true,
      firstIcon: 'mdi-arrow-collapse-left',
      lastIcon: 'mdi-arrow-collapse-right',
      prevIcon: 'mdi-minus',
      nextIcon: 'mdi-plus'
    }"></v-data-table>
</template>

<script>
    import PostService from '../services/PostService'
    export default {
        name: 'ViewPost',
        data() {
            return {
                posts: []
            }
        },
        mounted() {
            this.loadPosts()
        },
        methods: {
            loadPosts() {
                this.posts = []
                const posts = PostService.getAllPosts(posts).then(response => {
                    this.posts = response.data.recordset
                })
                console.log(posts)
            }
        }
    };
</script>   
</style>
  

консоль веб-браузера
[1]:https://i.stack.imgur.com/14vI8.png

Обратите внимание на подкачку в правом нижнем углу фотографии… Он показывает 1-5 из 7 результатов. В моей базе данных действительно есть 7 элементов, которые заполняют мой массив posts. Поэтому я не чувствую проблемы с моим вызовом axios. Вы также можете просмотреть данные на вкладке vue консоли с моими данными. Есть какие-нибудь мысли?

Вы должны объявить заголовки datatable; по крайней мере, текст (имя столбца) и значение (свойство в вашем объекте), как описано в https://vuetifyjs.com/en/components/data-tables /

заголовки: TableHeader[]

Массив объектов, каждый из которых описывает столбец заголовка.

 {
  text: string
  value: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  filterable?: boolean
  groupable?: boolean
  divider?: boolean
  class?: string | string[]
  width?: string | number
  filter?: (value: any, search: string, item: any) => boolean
  sort?: (a: any, b: any) => number
}