Javascript Laravel，Vue.js数组为空

我对laravel和vue.js框架一无所知。对于具有的学校项目，必须创建一个后端使用laravel，前端使用vue.js的应用程序。因此，我创建了一个API，以后在我的vue.Js中使用它。但问题是，当我想在Vue.JS中获取数据时，它告诉我它有一个空数组，该数组应该显示我数据库中的所有值（大约20个）。我已经挣扎了两天，现在，我完全迷失了方向，我不知道该怎么办，也不知道出了什么问题。。我尝试了我的API到邮递员和它的作品完美

规格： ->拉威尔5.6 ->Vue 2.5.7

我的API控制器：

    <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Note;
use App\Http\Resources\Note as NoteResource;

class NotesApiController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $notes = Note::all();
        return NoteResource::collection($notes);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $note = new Note;
        $note->user_id = $request -> input('user_id');
        $note->course_id = $request -> input('course_id');
        $note->title = $request -> input('title');
        $note->body = $request -> input('body');
        $note->file_name = $request -> input('file_name');
        $note->save();
        return new NoteResource($note);
        return response() -> json('success', 200);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $note = Note::findOrFail($id);
        return new NoteResource($note);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $note = Note::find($id);
        $note->user_id = $request -> input('user_id');
        $note->course_id = $request -> input('course_id');
        $note->title = $request -> input('title');
        $note->body = $request -> input('body');
        $note->file_name = $request -> input('file_name');
        $note->save();
        return new NoteResource($note);
        return response() -> json('success', 200);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $note = Note::find($id);
        $note -> delete();
        return response() -> json('success', 200);
    }
}

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class Note extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'user_id' => $this->user_id,
            'course_id' => $this->course_id,
            'title' => $this->title,
            'body' => $this->body,
            'file_name' => $this->file_name,
            'created_at' => $this->created_at->format('d/m/Y'),
            'updated_at' => $this->updated_at->diffForHumans(),
        ];
    }
}

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

// Route::middleware('auth:api')->get('/user', function (Request $request) {
//     return $request->user();
// });

//Index Page Vue
Route::get('/', 'PagesControllerApi@index');

//Afficher la liste de toutes les notes
Route::get('notes', 'NotesApiController@index');

//Montre une note selon son id
Route::get('notes/{id}', 'NotesApiController@show'); 

//Enregistre la note
Route::post('notes', 'NotesApiController@store'); 

//Mise-à-jour d'une note
Route::put('notes/{id}', 'NotesApiController@update'); 

//Effacer une note
Route::delete('notes/{id}', 'NotesApiController@destroy');

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');

window.Vue = require('vue');


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('notes', require('./components/notes.vue'));
Vue.component('navbar', require('./components/navbar.vue'));
Vue.component('paginate', require('vuejs-paginate'));


const app = new Vue({
    el: '#app'
});

Vue中的我的笔记组件

<template>
<div>

    <h2 class="m-4">Notes</h2>

</div>
</template>

<script>

    export default {
        data() {
            return{
                notes: [],
                note: {
                    id: '',
                    user_id: '',
                    course_id: '',
                    title: '',
                    body: '',
                    file_name:'',
                },
                note_id: '',
                pagination: {},
                edit: false
            };
        },

        created() {
            this.fetchArticles();
        },

        methods: {
            fetchArticles(page_url) {
            let vm = this;
            page_url = page_url || '/api/notes';
            fetch(page_url)
                .then(res => res.json())
                .then(res => {
                this.articles = res.data;
        })
        .catch(err => console.log(err));
        },
        } 
    }
</script>

笔记
导出默认值{
数据（）{
返回{
注：[]，
注:{
id:“”，
用户id:“”，
课程编号：''，
标题：“”，
正文：“”，
文件名：“”，
},
注意\u id:“”，
分页：{}，
编辑：false
};
},
创建（）{
this.fetchArticles（）；
},
方法：{
fetchArticles（页面\ url）{
让vm=这个；
page_url=page_url | |'/api/notes'；
获取（页面url）
.then（res=>res.json（））
。然后（res=>{
this.articles=res.data；
})
.catch（err=>console.log（err））；
},
} 
}

index.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>window.Laravel = { csrfToken: "{{ csrf_token() }}" }</script>

    <title>{{ config("app.name", "Laravel") }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">

    <navbar></navbar>

       <div class="container">
           <notes>

           </notes>
       </div>
    </div>

</body>
</html>

window.Laravel={csrfToken:“{{csrf_token（）}}}”
{{config（“app.name”，“Laravel”）}

API

VUE Develope显示的内容

因此，我无法在我的页面上显示任何值

---

提前谢谢

应该是

this.notes=res.data

但是你有

this.articles=res.data

然后，您只需在数组上循环并访问对象的属性，如下所示：

<div v-for="(note, index) in notes" :key="`note-${key}`">
    <h2 v-text="note.title"></h2>
    <p v-text="note.body"></p>
    <p v-text="note.filename"></p>
</div>




谢谢您的回答！我更正了它，但它没有改变任何东西，我的数组仍然是空的。。我也尝试过清除缓存，但没有用。嘿！我发现了问题！我还必须将我的页面url更改为完整的，而不仅仅是api/注释，因此@frans003确保您在
.env
文件中设置了
应用程序url=
，例如设置为
http://localhost:8000
以及嘿，它当前设置为以下
应用程序URL=http://localhost
。我应该添加端口号：8000吗？