CODEWITHSUNDEEP
vue.jsaxiosvuetify.js
Bean0341
Bean0341

Reputation: 1697

Vuetify datatable with Axios call

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.sstatic.net/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?

Upvotes: 1

Views: 1104

Answers (1)

Guillaume F.
Guillaume F.

Reputation: 6473

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
}

Upvotes: 1

Related Questions