Vuetify datatable with Axios call

Question

I am attempting to populate a datatable with an axios call. However I am unable to actually see the data in the table on my site. If I inspect the table I can see that the data is indeed there, but not visible to the end user. Any thoughts on what I am doing wrong here?

component

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

console of web browser [1]: https://i.stack.imgur.com/14vI8.png

Note the paging on the bottom right of the photo... It shows 1-5 of 7 results. There are indeed 7 items in my database that are populating my posts array. So I don't feel its an issue with my axios call. You as well can see the data in the vue tab of the console with my data. Any thoughts here?

You need to declare headers, with the column names and values. — Guillaume F.
@GuillaumeF. ohhh that was way too painful to be so simple... feel free to add as answer , and I will gladly give you the points. Thank you!! — Bean0341

Guillaume F. Guillaume F. · Accepted Answer · 2020-08-13T16:35:28

You have to declare the datatable headers; at least the text (column name) and value (property in your object) as documented in https://vuetifyjs.com/en/components/data-tables/

headers: TableHeader[]

An array of objects that each describe a header column.

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

Vuetify datatable with Axios call

1 Answers