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

【问题标题】：How to pass Laravel Resource API data to Vuejs?如何将 Laravel 资源 API 数据传递给 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是一模一样的吗？

标签： laravel api axios vue-resource vuetify.js

【解决方案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

【讨论】：