Module01 :: Vue.js에서주소와 장소 찾는 모달 구현하기

처음 페이지를 실행할때 전체 address를 받아옵니다. 

 this
                .$store
                .dispatch('FETCH_ADR', this.address)

FETCH_ADR({commit}, address){ //google 에서부터 음식점 주소를 FETCH 해옴
        api.requestFetchAdrData({commit},address).then(
            response => {
                var jadrAry = new Array();
                var jloclatAry = new Array();
                var jloclngAry = new Array();
                var jnaAry = new Array();
                var jphoReAry = new Array();
                

                var aJsonArray = new Array();
                var aJson = new Object();


                for(var i =0; i<response.data.results.length; i++){
                    jadrAry[i] = response.data.results[i].formatted_address;
                    var item = {};
                    item['주소']= response.data.results[i].formatted_address;
                
                    jloclngAry[i] = response.data.results[i].geometry.location.lng;
                    jnaAry[i] = response.data.results[i].name;
                    item['지역명']= response.data.results[i].name;
                    
                    let e = null;
                    if(response.data.results[i].hasOwnProperty('photos')){
                        jphoReAry[i] = response.data.results[i].photos.photo_reference
                    }else
                        jphoReAry[i] = 'photo 값이 없습니다.';
                    
                    JSON.stringify(item);
                    aJsonArray.push(item);

                }
               
                 commit('SET_ADR',jadrAry);
                 commit('SET_LOCX',jloclatAry);
                 commit('SET_LOCY',jloclngAry);
                 commit('SET_NAME',jnaAry);
                 commit('SET_PHOTOR',jphoReAry);
                 commit('SET_GOOGLEMAP',aJsonArray);
            }).catch(error=>{
                console.log(error);
            })
        
    }

Google Place API 를 사용해서 데이터를 받아와 알맞게 가공하여 return 합니다. 

commit 이후 Vuex에 데이터가 set 됩니다. 

  <!--Main Modal Page-->
                      <div v-if="eye">
                          
                        <b-form-input id="address_search" @keyup ="fetchAdr" type="text"  v-model="address"   ></b-form-input>
                        <b-table striped hover :items="map"  @row-clicked="clickEvent"></b-table>
                      </div>
                      
                      <div v-else>
                          
                        <b-form-input id="address_search2" @keyup ="fetchAdr" type="text"  v-model="address" ></b-form-input>
                        <b-table striped hover :items="map"  @row-clicked="clickEvent">
                            
                        </b-table> 
                      </div>
                    </div>

Main 페이지에서는 v-if 와 v-else 로 구분하여 

 

    if(this.eye == false) this.eye = true;

클릭할때마다 eye 데이터값이 변하면서 table (vue-bootstrap) 에 rendering 됩니다. 

 

검색 마다 rendering 되는 페이지를 구성하였습니다.