VueJS -用axios加载数据.数据为空

Question

我在本地有一个VueJS项目和我的API。当我使用Axios时，我遇到了一个问题，数据没有加载。

Vue警告:无效的支柱:类型检查失败的道具“数据”。预期数组，got对象

所以，这是逻辑的，我理解，当页面加载时，"data“为空，”片()“函数不能在空数组上执行。

我怎么改正呢?

我使用"Vuestic“模板，原始文件是这一个。

它们不使用axios，而是直接使用Json文件，因此对于它们来说，“用户”已经为"slice()“函数定义了。

我试着在桌子上使用"v-if“，但没有起作用。

我的代码：

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))
    },

我的API响应：

左边是"dates“，第二个请求是”飞行前请求“(状态代码: 204无内容)，我不知道这是否是我出现问题的原因

​

谢谢^^

Answer 1

如果我是对的，服务器需要释放授权请求头

Answer 2

您可以使用data.json()将响应转换为适当的格式。

我个人在fetch库中使用js构建，但如果您需要坚持使用它，在axios中也应该这样做。您只需添加身份验证即可。

    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()
    }