vuejs Datable is not working with api's fetched data

Question

I want to display the data in table using vue-datatable but it is not working. Here is the code that i am using ,i am getting data in json format but it is not appending with datatable can anyone help me in this or any better way to do this. Thanks in Advance

////main.js//// import Vue from 'vue' import { VuejsDatatableFactory } from 'vuejs-datatable'; Vue.use( VuejsDatatableFactory );

<script>
  import axios from 'axios';
  export default {
    data: () => ({
      drawer: null,
       columns: [
                    {label: 'id', field: 'recData.id'},
                    {label: 'user ID', field: 'recData.userId'},
                    {label: 'Title', field: 'recData.title'},
                    {label: 'Description', field: 'recData.body'},
                ],
                recData:[]
    }),

    created() {
              //api for getting posts details
            const token = 'https://jsonplaceholder.typicode.com/posts';
            axios({
                    method: 'get',
                    url: token,
                })
                .then((response) => {
                    this.recData = response.data;
                })
                .catch((error) => {
                    this.errors = error;
                })   

    },
  }
</script>

   <v-content>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <span class="mb-5">{{ recData }}</span>
         <datatable :columns="columns" :data="recData"></datatable>
        </v-row>
      </v-container>
    </v-content>

Try to console.log('cheking my data',response.data); and check data — Basharmal, Apr 26 '20 at 12:41
@MohammadUsman i am getting data see in above code i have mentioned in span tag but it is not appending to data table — HaryanviDeveloper, Apr 26 '20 at 12:48
can you console it and show me what you are getting the data is it same as your database — Basharmal, Apr 26 '20 at 12:50

Basharmal · Answer 1 · 2020-04-27T09:48:21.733

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>

edited Apr 27 '20 at 09:48

answered Apr 26 '20 at 13:00

Basharmal

1,313
10
30

i took reference from this example only it is working fine with static data but not with api fetched data – HaryanviDeveloper Apr 26 '20 at 14:01
So it means the problem is in api not in vuejstable – Basharmal Apr 26 '20 at 14:32
still no change – HaryanviDeveloper Apr 26 '20 at 15:18
are you using only vuejs or vuejs+laravel or something else?because I need to know from where you are getting the ```https://jsonplaceholder.typicode.com/posts``` – Basharmal Apr 27 '20 at 05:12
i am just using vuejs+bootstrap4 – HaryanviDeveloper Apr 27 '20 at 09:08
I have updated the answer try it, it will work 100% – Basharmal Apr 27 '20 at 09:37
thanks @MohammadUsman for putting this much effort but now it is showing some unexpected error "Cannot read property 'slice' of undefined" – HaryanviDeveloper Apr 27 '20 at 17:04

vuejs Datable is not working with api's fetched data

1 Answers1