[前端史萊姆與Vue的三十天時光冒險]Day28 Vue CLI專案實作(二)：Axios串接API及房間列表畫面

Mio

Published in

斜槓女紙

Oct 31, 2019

好像漸漸的有點樣子了？

嗨！延續昨天的進度，今天要來實作首頁的房間列表頁面。

廢話不多說，直接開始囉！

新增房間列表元件

首先在components資料夾新增名為roomList.vue的檔案。
調整views資料夾中的Home.vue的程式碼，新增<roomLists>路由，並在<script>標籤中引入剛剛新增的roomList.vue。

<div id="section-rooms" class="container-fluid">
    <div class="col-12 section-title">Rooms</div>
    <roomLists/>
</div>

<script>
    import BannerSection from '@/components/banner.vue';
    import roomLists from '@/components/roomList.vue';
    
    export default {
        name: 'home',
        components: {
            BannerSection,
            roomLists,
        }
    }
</script>

引入Axios

在 roomList.vue 的 <script> 標籤中設定房間列表的data 值。

export default {
    name: 'roomLists',
    data(){
        return{roomLists:[],}
    },
}

2. 使用methods引入Axios

methods: {
    getRoominfos(){
        const axios = require('axios'); 
        let roomURL =  "API連結";        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer APITOKEN'
        }
    
        const vm = this;        axios.get(roomURL, { headers })
             .then((res) => vm.roomLists = res.data.items)
             .catch(function (error) {console.log('連線異常');
        });
    }
}

3. 使用created執行剛剛新增的函式

created() {this.getRoominfos();}

排除Bug

原本呢我在<template>標籤內新增了下面的程式碼，想說先測試看看資料有沒有正常出現

<div class="card" v-for="(item, key, index) in roomLists" :key="item.id">
    <h3>{{item.name}}</h3>
</div>

結果出現了這個畫面

搜尋了一下發現是v-for這個參數不能放在root根元素中，因為這樣一來要渲染的元素太多了，所以報錯。後來採用了下面這個問答題供的方法，外面多放了一層<div>來解決這個問題。

Vue: How to use store with component?

最後調整了一下HTML結構並補上CSS樣式後也出現了一開始製作的畫面囉~

仍須努力啊…

還記得之前卡在引入第二支API的部分嗎？後來發現是因為受到Ajax的異步問題而產生的，目前還正在努力理解中，希望能有順利破關的一天阿

幫我畫十字祈禱吧！

剩下2天了，明天要來談談之前提到的vue-scrollto 實作，我們明天見唷！

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂