Vue.js 取得 ajax 清單資料

在 Vue.js 中並沒有內建自己的呼叫 ajax 功能，所以 Vue.js 官方有推薦一款 axios。

我們可以先試著用一下

axios.get("api_booking/get_order_list",{
          params: {
            member_id: "james"
          }
        }).then(response => this.items = response.data.datalist);

上面這個例子就是我們可以利用 get 的方式去取得 API 的資料。我們可以看到這裡面直接可以使用 then 也就是說可以確認 api 是跑完了以後才執行裡面的動作。

new Vue({
    el:"#list",
    data:{
      items: []
    },
    mounted(){
      axios.get("api_booking/get_order_list",{
          params: {
            member_id: "james"
          }
        }).then(response => this.items = response.data.datalist);
    }
   
  })

結合 Vue.js 就會變成這樣。當取得資料後可以將資料寫入 items 這個變數給 Vue.js 使用