Как установить несколько полей в vue.js с автозаполнением Google? - PullRequest
Новая
       50

Как установить несколько полей в vue.js с автозаполнением Google?

0 голосов
/ 21 июня 2019

Я пытаюсь использовать автозаполнение Google, чтобы заполнить несколько полей одним выделением в файле vue.js. Откуда я получаю address_components? Отсюда vue-google-autocomplete: https://github.com/olefirenko/vue-google-autocomplete

Я до сих пор пытался следовать той же форме адреса Google, найденной здесь: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

В консоли я получаю эту ошибку TypeError: "e[s] is undefined"

Для компонента HTML у меня есть: 

      <label >City</label>
      <vue-google-autocomplete ref="locality" id="locality" class="form-control" type="text" v-on:placechanged="getAddressData" placeholder="Enter city" country="us"></vue-google-autocomplete>
   </div>
   <div class="col" style="margin-bottom: 20px;">
      <label >State</label>
      <vue-google-autocomplete ref="administrative_area_level_1" id="administrative_area_level_1" class="form-control" type="text" maxlength="2" v-on:placechanged="getAddressData" placeholder="Enter State" country="us"></vue-google-autocomplete>
   </div>
   <div class="col" style="margin-bottom: 20px;">
      <label >Zip Code</label>
      <vue-google-autocomplete ref="postal_code" id="postal_code" class="form-control" type="text" maxlength="5" v-on:placechanged="getAddressData" placeholder="Enter zip code"></vue-google-autocomplete>
   </div>

До сих пор мне когда-нибудь удавалось как-то заполнить 3 поля Object object, но я не могу воспроизвести это, поскольку изменил его. 

return{
  componentForm: {
              street_number: '',
              route: '',
              locality: '',
              administrative_area_level_1: '',
              country: '',
              postal_code: ''
  }
}

getAddressData: function (addressData, placeResultData) {
   for(var i = 0; i < placeResultData.address_components.length; i++) {
       var addressType = placeResultData[i].types[0]
       if(this.componentForm[addressType]) {
           var val = placeResultData.address_components[i][this.componentForm[addressType]]
           document.getElementById(addressType).value = val
       }
   }
}

Я хотел бы получить несколько полей для заполнения всеми возвращаемыми компонентами мест, но я не уверен, почему мой getAddressData не устанавливает значения отдельных компонентов.

1 Ответ

0 голосов
/ 21 июня 2019

Попробуйте с этим: 

getAddressData (event){
   console.log(event);
   if (event.address_components){
      if (event.address_components[2].long_name) {
         this.$el.querySelector('#locality').value = event.address_components[2].long_name; //Check from console
      }
      if (event.address_components[4].long_name) {
         this.$el.querySelector('#administrative_area_level_1').value = event.address_components[4].long_name; //Check from console
      }
   }
}

Примечание

Проверьте, какие данные вам нужны, я не уверен насчет имен. Но я думаю, что это должно работать нормально и заполнить ваш вклад.

...