[前端暴龙机，Vue2.x 进化 Vue3 ] Day21. 『小专题◕ᴥ◕』 Vue 旅游小帮手(二)

今天继续来增加功能，并再取得另一批资料来使用

目标四，再加入旅馆 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;
    }
}

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