vuetable - no data available

Question

I am using vue.js, and am working through the vuetable tutorial, but my vuetable always displays no data available.

Here is my code:

MyVueTable componant:

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

I don't understand how the vuetable gets the data and maps it to the specified fields. There are no errors in the console.

Any assistance is appreciated as I am more than a little confused.

Answer 1

Response of the api looks like an array of items: {"id":"71840","employee_name":"mpr51_0994","employee_name":"123","employee_name":"2333","profile_image":""}

So fields should be:
:fields="['id', 'employee_name', 'employee_name', 'employee_name', 'profile_image']"

After looking more in depth, it seems your api endpoint is not sortable for vuetable needs. It's well described here: https://www.vuetable.com/api/vuetable/properties.html#api-url

If you look in networks devtools tab, vuetable request the api with some params: https://dummy.restapiexample.com/api/v1/employees?sort=&page=1&per_page=10, but this api doesn't paginate response.