vue.js - vuejs Datable 无法使用 api 获取的数据

Question

我想使用 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>

Answer 1

问题是您试图在数组中访问位于另一个不存在的对象内部的对象，因此请尝试下面的代码尝试访问这样的数组的对象，而 {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>