Question

我正在尝试从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>

Answer 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]);

Answer 2

答案是跨域资源共享。

要将laravel API与前端连接，我需要通过作曲家添加barryvdh / laravel-cors。

composer require barryvdh/laravel-cors

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

我无法显示Laravel API的数据

2 个答案: