VueJS - 使用 axios 加载数据 - 数据为空答案

【问题标题】：VueJS - Loading data with axios - Data emptyVueJS - 使用 axios 加载数据 - 数据为空
【发布时间】：2021-02-23 06:48:15
【问题描述】：

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

[Vue 警告]：无效的道具：道具“数据”的类型检查失败。期望的数组，得到对象

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

我该如何纠正？

我使用“Vuestic”模板，原文件为this one

他们不使用 axios，而是直接使用 Json 文件，所以对于他们来说，“users”已经为“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”，第二个请求是“Preflight Request”（状态码：204 No Content），我不知道这是否是我的问题的原因

谢谢^^

【问题讨论】：

标签： api vue.js axios

【解决方案1】：

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

【讨论】：

【解决方案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()
    }

【讨论】：