如何将 Laravel 资源 API 数据传递给 Vuejs？

Posted 2023-02-22

【中文标题】如何将 Laravel 资源 API 数据传递给 Vuejs？

【英文标题】：How to pass Laravel Resource API data to Vuejs?

【发布时间】：2018-08-05 14:03:15

【问题描述】：

如果我 return Record::all(); 使用 Axios 进入 Vuetify 数据表，数据将显示。但是如果我使用 return RecordResource::collection(Record::all()); ，数据甚至不会存储在局部变量中。

我检查了网络选项卡中的数据，数据在那里，但在 Vue 选项卡中，数据表中没有数据。也没有错误。

这是我的控制器：

<?php

namespace App\Http\Controllers;

use App\Record;
use Illuminate\Http\Request;
use App\Http\Resources\RecordResource;
use App\Http\Resources\RecordCollection;

class RecordController extends Controller

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    
        return RecordResource::collection(Record::all());
    

这是我的 Vuejs 脚本：

 <script>
  export default 
    data () 
      return 
        search: '',
        totalItems: 0,
        items: [],
        loading: true,
        pagination: ,
        headers: [
          
            text: 'Teacher Name',
            align: 'left',
            value: 'user'
          ,
           text: 'Type', align: 'center', value: 'type' ,
           text: 'Time', align: 'center', value: 'time' 
        ]
      
    ,
    watch: 
      pagination: 
        handler () 
          this.getDataFromApi()
            .then(data => 
              this.items = data.items
              this.totalItems = data.total
              console.log(this.items)
            )
        ,
        deep: true
      
    ,
    mounted () 
      this.getDataFromApi()
        .then(data => 
          this.items = data.items
          this.totalItems = data.total
        )
    ,
    methods: 
      getDataFromApi () 
        this.loading = true
        return new Promise((resolve, reject) => 
          const  sortBy, descending, page, rowsPerPage  = this.pagination
          let items = []
          this.$http.get('http://localhost:8000/api/records')
          .then(response => 
            items = response.data
          )
          .catch(error => 
            console.log(error);
          );

          const total = items.length


          if (this.pagination.sortBy) 
            items = items.sort((a, b) => 
              const sortA = a[sortBy]
              const sortB = b[sortBy]

              if (descending) 
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
               else 
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              
            )
          

          if (rowsPerPage > 0) 
            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
          

          setTimeout(() => 
            this.loading = false
            resolve(
              items,
              total
            )
          , 1000)
        )
      
    
  
</script>

我的记录资源如下所示

    public function toArray($request)
    
        return [
            'user' => User::find($this->user_id)->fname . " " . User::find($this->user_id)->mname . " " . User::find($this->user_id)->lname,
            'type' => $this->created_at->hour < 12 ? 'Morning ' . $this->type : 'Afternoon ' . $this->type,
            'time' => $this->created_at->toDayDateTimeString()
        ];
    

来自 API 资源的示例数据

// 20180227062317
// http://localhost:8000/api/records

[
  
    "user": "Chadd Q. Rau",
    "type": "Afternoon In",
    "time": "Sun, Jan 28, 2018 8:22 PM"
  ,
  
    "user": "Rosalind J. Sanford",
    "type": "Morning In",
    "time": "Tue, Jan 23, 2018 12:15 AM"
  ,
  
    "user": "Rosalind J. Sanford",
    "type": "Morning In",
    "time": "Mon, Feb 12, 2018 12:45 AM"
  
]

【问题讨论】：

您是否尝试比较返回all() 和返回collection 时的json？可能数据的格式不符合预期。

由于 API 资源，它们返回相同的格式但结果不同

数据表仅适用于参与的结果。也许您对格式或内容有疑问。一个样本可以帮助找出问题所在。正如@Bitfumes 所说，一些库会在 json 的根目录上添加一个“数据”键，这将在 axios 上产生一个response.data.data。

我编辑了我的帖子。 @cbaconnier。我还从资源中删除了数据包装，以便响应只有 1 个数据包装

我换个方式问你：你能确认一下，all()方法和collection()方法之间，network选项卡上的json是一模一样的吗？

【参考方案1】：

为什么要创建 item 变量，而不是在 vie data() 中定义一个数据字段

data()
  return 
    item : 
  

现在在你的 axios 中

axios.get('http://localhost:8000/api/records')
      .then(response => 
        this.items = response.data
      )
      .catch(error => 
        console.log(error);
      );

如果您使用的是 resource::collection，那么您可能必须在 .then 部分中说 response.data.data