Question

我创建了一个简单的应用程序来显示成员，基本上是粗略的，在设置了我的api路由和资源后， 我正在尝试使用vue作为前端从我的api中获取数据，并且它返回空白而不会出现错误。我在做什么错。该表显示正常，但未获取数据。
这是我的代码。

<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是我的响应api，所以我必须使其data有效。

我正在尝试使用fetch从我的api中获取数据，并且它返回无错误的空白

1 个答案: