使用 Vue.js 在 Laravel 8 中使用 axios 显示加载的 API 数据的问题答案

【问题标题】：Issues showing the loaded API data using axios in Laravel 8 using Vue.js使用 Vue.js 在 Laravel 8 中使用 axios 显示加载的 API 数据的问题
【发布时间】：2021-01-25 06:14:49
【问题描述】：

我有一个使用 Vue.js 运行的 Laravel 8 应用程序。女巫，我正在尝试将一些数据加载到我的项目中。

我可以获取数据（在控制台日志记录时也进行了测试），但是当我分配帖子变量时，该变量不会显示数据。我从大多数示例中看到，这应该是开箱即用的。

我在这里错过了什么？

<template>
        {{posts}}
</template>

<script>
export default {
    data(){
        return {
            posts: [],
        }
    },
    mounted() {
        this.loadPosts();
    },
    methods:{
        loadPosts: function(){
           axios.get("https://jsonplaceholder.typicode.com/todos")
            .then(response => {
                this.posts = response.data;
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
}
</script>

【问题讨论】：

从 vue 端看起来是正确的。问题可能出在数据上。你能检查一下它返回的是一个 json 数组，而不是一些看起来像 json 的字符串吗？
是的（类型是 JSON），我正在使用这个：jsonplaceholder.typicode.com/todos（我自己的 API 也是如此）。女巫只是一个回报 $var

标签： laravel vue.js

【解决方案1】：

我认为您应该将 {{posts}} 放在根 div 元素中：

<template>
    <div>{{posts}}</div>
</template>

【讨论】：

嗨，我得到了相同的结果（也通过添加该 div 进行了测试）
嗨，我用 laravel 8 测试了这段代码，得到了预期的结果。也许问题是别的。检查控制台选项卡，看看是否有任何错误