我正在尝试使用 fetch 从我的 api 中获取数据，它 returns 空白且没有错误

Question

我创建了一个简单的应用程序来显示成员，基本上是 crud，在设置我的 api 路由和资源之后， 我正在尝试使用 vue 作为我的前端从我的 api 获取数据，它 returns 空白而没有出现错误。我在做什么错了。 Table 显示正常，但未获取数据。
这是我的代码。

<template>
<div>
   <table class="table table-condensed">
       <tr>
           <th>Full Name</th>
           <th>Gender</th>
           <th>Age</th>
           <th>Country</th>
       </tr>
       <tr v-for="member in members" v-bind:key="member.id">
           <td>{{member.name}} {{member.surname}}</td>
           <td>
               {{member.gender}}
           </td>
           <td>
               {{member.age}}
           </td>
           <td>
               {{member.country}}
           </td>
       </tr>
   </table>
</div></template>

  <script>
  export default {
  data(){
        return{
            members: [],
            member:{
                id: '',
                name: '',
                surname: '',
                age: '',
                gender: '',
                email: '',
                country: ''
            },
        }
    },
    created(){
        this.listMembers();
    },
    methods:{
        listMembers(){
            fetch(`api/members`,{
                method:'Get'
            })
            .then(res => res.json())
            .then(res => {
                this.members = this.data;
            })
            .catch(err => console.log(err));
        },
    }
}
</script>

出于好奇，这是我的后端

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illminate\Http\Response;
use App\Members;
use App\Http\Resources\MembersResource;

class MembersController extends Controller
{
    //list all Members
    public function index(){
        $members = Members::orderBy('id','desc')->paginate(10);
        return MembersResource::collection($members);
    }

    //list a single member
    public function member($id){
        $member = Members::findOrFail($id);
        return new MembersResource($member);
    }

    public function delete_member($id){
        $member = Members::findOrFail($id);
        if($member->delete()){
            return new MembersResource($member);
        }
    }
}

和我的资源

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class MembersResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'surname' => $this->surname,
            'gender' => $this->gender,
            'age' => $this->age,
            'email' => $this->email,
            'country' => $this->country
        ];
        //return parent::toArray($request);
    }
}

我的api路线

Route::get('/members', 'MembersController@index');
Route::get('/member/{id}', 'MembersController@member');
Route::delete('/member/{id}', 'MembersController@delete_member');

Answer 1

我必须做到 res.data 因为 data 是我的回应 api 并且它起作用了。

我正在尝试使用 fetch 从我的 api 中获取数据，它 returns 空白且没有错误

I'm trying to fetch data from my api using fetch and it returns blank with no errors

php

vue.js

laravel-5.6