VueJS - Loading data with axios - Data empty

Question

I have an VueJS project and my API, both in local. I have a problem when i use Axios, data didnt load.

[Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got Object

So, it's logic and i understand it, when the page load, "data" is empty and "slice()" function cant be execute on an empty array.

How can i correct it ?

I use "Vuestic" template, and the original file is this one

They dont use axios, but directly a Json file, so for them "users" is already defined for the "slice()" function.

I tried tu use a "v-if" on the table, but didnt worked

My code :

import axios from 'axios';

var tokenStorage = localStorage.getItem('token')
var data = [];
export default {
  data () {
    return {
      data: data.slice(),
      title: 'Les prochaines dates',
    }
  },
  async mounted () {
        axios
    .get('https://api.test/api/dates',
    {
      headers: {
        'Authorization' : 'Bearer ' + tokenStorage 
      }
    })
        .then(response => (this.data = response))
    },

My API response :

it's "dates" on the left, the second request is the "Preflight Request" (Status Code: 204 No Content), i dont know if that can be the reason of my problem

Thanks ^^

Answer 1

If I'm right, the server needs to release the authorization request header

Answer 2

You could use data.json() to convert your response to an appropriate format.

I personally use the js build in fetch library but that should work similar in axios if you need to stick with it. You just need to add your authentication.

    data () {
        return {
            response: null
        }
    },
    methods: {
        async doRequest () {
            const response = await fetch('https://api.test/api/dates')
            const data = await response.json();
            console.log(data, data.slice()); // <-- These are the same
            this.response = data.slice();
        }
    },
    created () {
        this.doRequest()
    }