問題：在vue中獲取分頁例項物件中的具體例項物件的時候需要使用reponse.data.data，為什麼需要呼叫兩次data呢？請看下文

一、什麼是Axios

在文件中我們可知，Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

其擁有如下特點：

• 從 node.js 建立 http 請求
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF

首先需要在應用vue的頁面中註冊axios，比如註冊到頁面引入的js檔案中，註冊程式碼如下：

Vue.prototype.$http = window.axios;
 

window.axios.post('api_url').then(function(response){
	console.log(reponse);
      }

三、api返回資料

$users = User::orderBy('id')->paginate(5);
return $users;

axios對響應的資料的處理，寫在.then方法的閉包函式內，如上文中我們將返回的資料列印輸出在控制檯。

控制檯列印如下：

首先，我們得知這是一個object物件

然後我們將其展開來看：

也就是說，reponse是以json形式返回的，其中包括了響應的各種屬性：配置、資料內容（data）

細看data（第一層data）這一個屬性，我們可以得知此時其中裝了一個obejct

觀察發現是我們api返回的分頁物件例項。

Laravel文件中提到，”the paginator instances are iterators and may be looped as an array“，也就是說，分頁例項物件本身是可以直接參與迴圈，直接在blade中輸出詳細內容。

但是此時我們在vue中，需要將具體內容取出來，賦值給變數而非直接渲染輸出，就需要準確逐層取值。

paginate例項物件，其屬性包含：

{
   "total": ,
   "per_page": ,
   "current_page": ,
   "last_page": ,
   "first_page_url": "",
   "last_page_url": "",
   "next_page_url": "",
   "prev_page_url": null,
   "path": "",
   "from": ,
   "to": ,
   "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
   ]
}

 

vm.users = response.data.data;