今天繼續來增加功能，並再取得另一批資料來使用

目標四，再加入旅館 API

有了景點，再來解決住的部份，所以我們再繼續加入另一支 API ，取得旅館的訊息
高雄市一般旅館資料

再取一份旅館資料

data:{
    attractions: [],
    areaList: [],
    hotels: [],
    selectArea: '全景點',
    selectHotel: {},
},
.....
methods:{
    getDatas(){
      
      // 取得旅遊景點
      axios.get("https://api.kcg.gov.tw/api/service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then( res => {
        this.attractions = res.data.data.XML_Head.Infos.Info;
        this.getAreaList();
      }).catch( error => { })
      
      // 取得旅館資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/8ed53368-e292-4e2a-80a7-434cf497220c").then( res => {
        this.hotels = res.data.data;
      }).catch( error => { })
    },
    getAreaList(){
      this.attractions.forEach(ele => {
        let areaName = ele.Add.substring(6,9);
        if(!this.areaList.includes(areaName)) this.areaList.push(areaName);
      })
    },
    setArea(item){
      this.selectArea = item;
    }
}

同樣使用 computed 做列表渲染

computed:{
    renderAttractions(){
      if(this.selectArea === '全景點'){
        return this.attractions;
      }else{
        return this.attractions.filter(ele => ele.Add.match(this.selectArea))
      }
    },
    renderHotels(){
      if(this.selectArea === '全景點'){
        return this.hotels;
      }else{
        return this.hotels.filter(ele => ele.鄉鎮.match(this.selectArea))
      }
    }
},

只有在該地區後才會顯示選該旅館

接著，不希望在預設全景點時就顯示旅館訊息，所以我們必須加上條件 - 只有點選區域後，才會顯示該地區的旅館訊息，那麼還記得在 Vue 裡面，我們要去控制內容顯示或不顯示的指令是甚麼嗎? 沒錯，我們將使用 v-if

<div id="app">
  <div class="flexbox areaList">
    <div class="areaBtn" :class="{activeArea: selectArea === '全景點'}" @click="setArea('全景點')">全景點</div>
    <div class="areaBtn" :class="{activeArea: selectArea === item }" v-for="item in areaList" :key="item" @click="setArea(item)"> {{ item }} </div>
  </div>
  
  <div class="flexbox hotelslist" v-if="selectArea !== '全景點'">
    <h3>旅館列表</h3>
    <div v-for="item in renderHotels" :key="item.seq" class="Hotels">
      <span>
        {{ item.旅宿名稱 }}( {{ item.電話 }} ) | {{ item.地址 }}
      </span>
      <button class="hotelSelect" @click="setHotel(item)">選擇</button>
    </div>
    
  </div>

  <ul>
    <li class="attractions" v-for="item in renderAttractions" :key="item.Id">{{ item.Name }} [ {{ item.Add }} ]</li>
  </ul>
</div>

在 HTML 部份，除了加上 v-if 控制之外，我還有再稍微調整一下板型，所以架構有些變化，另外會將選中的飯店透過 setHotel function() 存到變數 selectHotel 中

目標五，我沒車車怎麼辦?

疊字~ 喜歡嗎? 還是討厭? (歡迎下面留言 XD

沒關係，這裡有 YouBike

高雄YouBike2.0公共自行車租賃站即時資訊

看到了嗎 ? YouBike 資訊 可是熱門應用第一名呢，不怕你騎、就怕你不騎~

取得 YouBike 2.0 訊息

data:{
    attractions: [],
    areaList: [],
    hotels: [],
    youbikes: [],
    selectArea: '全景點'
},
.....
methods:{
    getDatas(){
      
      // 取得旅遊景點
      axios.get("https://api.kcg.gov.tw/api/service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then( res => {
        this.attractions = res.data.data.XML_Head.Infos.Info;
        this.getAreaList();
      }).catch( error => { })
      
      // 取得旅館資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/8ed53368-e292-4e2a-80a7-434cf497220c").then( res => {
        this.hotels = res.data.data;
      }).catch( error => { })
      
      // 取得 YouBike資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092").then( res => {
        this.youbikes = res.data.data.retVal;
      }).catch( error => { })
    },
    getAreaList(){
      this.attractions.forEach(ele => {
        let areaName = ele.Add.substring(6,9);
        if(!this.areaList.includes(areaName)) this.areaList.push(areaName);
      })
    },
    setArea(item){
      this.selectArea = item;
    }
}

取完資料後剩下的就等下一篇整合一下運用了~

小結

1. 複習 v-if 控制顯示
2. 複習 axios 串接 API