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>

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

如果您查看网络 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>

vuetable - 无可用数据

vuetable - no data available

vue.js

vue-tables-2