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.

@ManUtopiK yes, I have followed the instructions here: https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-01 — Keith, Aug 28 '19 at 11:02

ManUtopiK · Accepted Answer · 2019-08-28T11:28:13.690

2

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.

edited Aug 28 '19 at 11:28

answered Aug 28 '19 at 11:07

ManUtopiK

4,495
3
38
52

Thanks - updated the code but still the same issue. Why would the names of the fields need to be changed? – Keith Aug 28 '19 at 11:12
Take a look of your api response! https://dummy.restapiexample.com/api/v1/employees . Vuetable look on your data to found field as provided. – ManUtopiK Aug 28 '19 at 11:29
Thanks for the response and looking into it. So is there no way to use a `vuetable` with an API that does not paginate/allow sorting? I just wanted it to show the response on one page for the time being, ignoring any type of pagination. I had seen the URL it was hitting, but it is valid, I was hoping there would be a way to circumvent the sorting. – Keith Aug 28 '19 at 11:39
No, you can use any api you want. But if your api is not sortable or not paginated the "vuetable way", you have to handle your own logic. It's described here: https://www.vuetable.com/guide/sorting.html#overriding-the-sort-query-string – ManUtopiK Aug 28 '19 at 12:32
1

You said you want to show response for one page only. So, you've better to quering your api endpoint and provide your data with data-mode: https://www.vuetable.com/guide/api-vs-data-mode.html#data-mode – ManUtopiK Aug 28 '19 at 12:34
Thank you, I now have this working will post my updated code. – Keith Aug 28 '19 at 13:06

score 0 · Answer 2 · answered Aug 28 '19 at 13:08

As per ManUtopiK's comment, I amended the code as follows:

<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 - no data available

2 Answers2