[Vuejs]-Vuejs Datable is not working with api's fetched data

by

0👍

The problem is that you are trying to access in the array the object which is inside of another object which is not existed so try the below code try to access the object of an array like this {label: 'id', field: 'id'} not like that {label: 'id', field: 'recData.id'}
this this.recData = data line need to be changed to this this.recData = data.data

Try this

    <script>
    import axios from 'axios';
    import Vue from "vue";
    import { VuejsDatatableFactory } from "vuejs-datatable";

    Vue.use(VuejsDatatableFactory);
    export default {
        data() {
            return {

                      drawer: null,
            columns: [
                    {label: 'id', field: 'id'},
                    {label: 'user ID', field: 'userId'},
                    {label: 'Title', field: 'title'},
                    {label: 'Description', field: 'body'},
                ],
                recData:[]

            };
        },
      created() {
                //api for getting posts details

                axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(({ data }) => (this.recData = data.data));

               },
        };
    </script>

Leave a comment