vue.js - vuetable - 没有可用的数据

Question

我正在使用vue.js，并且正在完成vuetable教程，但我的 vuetable 始终显示no data available.

这是我的代码：

MyVueTable 组件：

<template>
  <vuetable ref="vuetable"
    api-url="http://dummy.restapiexample.com/api/v1/employees"
    :fields="['id', 'name', 'salary', 'age', 'profile image']"
    pagination-path=""
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'

export default {
  components: {
    Vuetable
  }
}
</script>

应用程序.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="ui container">
      <my-vuetable></my-vuetable>
    </div>
  </div>
</template>

<script>
import MyVuetable from './components/MyVuetable'

export default {
  name: 'app',
  components: {
    MyVuetable
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我不明白 vuetable 如何获取数据并将其映射到指定字段。控制台中没有错误。

感谢任何帮助，因为我有点困惑。

Answer 1

api 的响应看起来像一个项目数组： {"id":"71840","employee_name":"mpr51_0994","employee_name":"123","employee_name":"2333","profile_image":""}

所以字段应该是：
:fields="['id', 'employee_name', 'employee_name', 'employee_name', 'profile_image']"

在深入研究之后，您的 api 端点似乎无法满足 vuetable 的需求。这里有很好的描述：  https ://www.vuetable.com/api/vuetable/properties.html#api-url

如果您查看 networks devtools 选项卡，vuetable 请求带有一些参数的 api: https://dummy.restapiexample.com/api/v1/employees?sort=&page=1&per_page=10，但此 api 不会对响应进行分页。

Answer 2

根据 ManUtopiK 的评论，我将代码修改如下：

<template>
  <vuetable ref="vuetable"
    :api-mode="false"
    :data="apiData"
    :fields="['id', 'employee_name', 'employee_name', 'employee_name', 'profile_image']"
    pagination-path=""
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'
import $http from 'axios'

export default {
  components: {
    Vuetable
  },
props: {
      apiData: {
        type: Object
      }
},
created() {
    let uri = `http://dummy.restapiexample.com/api/v1/employees`
      $http.get(uri).then(x => {
          this.apiData = x.data
      })
    }
}
</script>