我无法显示来自 laravel api 的数据答案

【问题标题】：I cant display data from laravel api我无法显示来自 laravel api 的数据
【发布时间】：2019-11-23 02:43:00
【问题描述】：

我正在尝试从我的 laravel 应用程序中获取数据，并将其显示在 Vue CLI 中。我看到了响应，但我无法在 VUE 应用程序中显示它。

当我得到示例 API 时，它可以工作，但不是来自我的 laravel 服务器。

<template>
  <div id="app">
     <h1>{{ results }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
      return{
         results: null
      }
    },

    mounted() {
        axios.get('http://127.0.0.1:8000/api/')
            .then(response => {
                this.results = response.data.results
            })
    }
}
</script>

【问题讨论】：

你的结果似乎是一个对象，在一个数组中。如果将 {{ results }} 更改为 {{ results[0].name }} 会发生什么？
什么也没发生。
您的浏览器中是否安装了Vue.js devtools 扩展程序？你能确保results 被你的回复填充了吗？可以发一下控制器方法吗？
我认为第二个问题是您有this.results = response.data.results，当根据您的网络选项卡时，没有results 属性。它应该只是this.results = response.data。
好吧，现在我有 axios.get('http://127.0.0.1:8000/api/').then(response => {this.results = response.data}) 并且关于 Vue 扩展，我的结果是 null

标签： laravel vue.js axios

【解决方案1】：

您的结果以对象数组的形式被接收，这是一个 JSON 编码的 Laravel 集合。您需要挑出要显示的对象，然后是该对象的属性。

<div id="app">
    <h1>{{ results[0].name }}</h1>
</div>

但是，如果您的控制器方法是这种情况，您实际上应该只返回一个对象，而不是一组对象。（例如，->first() 而不是 ->get()）

<div id="app">
    <h1>{{ result.name }}</h1>
</div>

集合一般用于在列表、表格、选项等中显示多个结果：

<div id="app">
    <ul>
        <!-- v-for will loop through results -->
        <li v-for="(result, index) in results">{{ result.name }}</li>
    </ul>
</div>

编辑：

此外，您的结果声明需要根据网络响应进行调整。

this.results = response.data.results;

应该是：

this.results = response.data;

或者，您的控制器响应需要是：

return response()->json(['results' => $results]);

【讨论】：

我确实像你说的那样，这就是结果。 imgur.com/a/jiGqJkZ
既然你改成['results' => $results]，你是不是也改回this.results = response.data.results？这是其中之一。图片很有帮助，但我看不到您的 .then 声明。
是的，但现在我在 chrome 中看不到响应。看我的下一张图。 imgur.com/fEb1ARP
这没有意义，除非请求发生了其他事情。您应该以一种或另一种方式收到一些回应。特别是如果 PostMan 给你一个。我真的很想帮助你，但我不确定现在还能提供什么。由于屏幕空间有限，很难一次看到所有内容。如果我能弄清楚该怎么做，我们可以尝试将其转移到聊天中。
我看到您似乎也有多个 javascript 错误。控制台中发生了什么？其中任何一个都可能会停止您的应用程序的运行。

【解决方案2】：

答案是跨域资源共享。

要将 laravel API 与前端连接，我需要由 composer 添加 barryvdh/laravel-cors。

composer require barryvdh/laravel-cors

接下来在app/Http/Kernel.php 中添加中间件以启用在 laravel APP 之外使用 API。在我对 Vue Cli 的问题中。

【讨论】：