vuejs Datable не работает с извлеченными данными API - PullRequest
Новая
       61

vuejs Datable не работает с извлеченными данными API

0 голосов
/ 26 апреля 2020

Я хочу отобразить данные в таблице, используя vue -datatable, но это не работает. Вот код, который я использую, я получаю данные в формате json, но он не дополняется данными, может кто-нибудь помочь мне в этом или любом другом лучшем способе сделать это. Заранее спасибо

////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>
enter image description here

1 Ответ

0 голосов
/ 26 апреля 2020

Проблема в том, что вы пытаетесь получить доступ в массиве к объекту, который находится внутри другого объекта, которого не существует, поэтому попробуйте приведенный ниже код попытаться получить доступ к объекту массива, подобному этому {label: 'id', field: 'id'}, а не так {label: 'id', field: 'recData.id'} эту this.recData = data строку необходимо изменить на эту this.recData = data.data

Попробуйте это 

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