单独查看 Google Autocomplete Address with nuxtJs

Question

我正在使用 Google Autocomplete Places 和 NuxtJs，如下所述 link:

https://medium.com/@jpoechill/superbasic-google-autocomplete-with-nuxt-js-378a9262659a

它工作正常，但事实是我想在像这样的“自动填充字段”这样的自动填充输入中分别从地址获取数据：

https://www.npmjs.com/package/vue-place-autocomplete

我不想详细说明，如果我可以 return 在控制台中单独显示地址（按国家、州、城市...），那就太好了！

代码如下：

<v-text-field id="searchTextField" v-model="searchTextField" label="Digite um endereço" v-on:keydown="searchAddress()" color="rgba(65, 27, 153, 0.95)" outlined>
</v-text-field>

方法：

async searchAddress() {
       var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(-33.8902, 151.1759),
         new google.maps.LatLng(-33.8474, 151.2631));
        var input = document.getElementById('searchTextField');
        var options = {
          bounds: defaultBounds,
          types: ['address']
        };
        this.autocomplete = new google.maps.places.Autocomplete(
          input, options
        );
      },

Answer 1

使用以下代码解决：

  async searchAddress() {
    
    var address1Field = document.querySelector("#searchTextField");
    this.autocomplete = new google.maps.places.Autocomplete(address1Field, {
      componentRestrictions: { },
      fields: ["address_components", "geometry"],
      types: ["address"],
    });
    address1Field.focus();
    this.autocomplete.addListener("place_changed", this.fillInAddress);
  },



  fillInAddress() {
    this.place = this.autocomplete.getPlace();
    this.selectedAddress = this.place.address_components
    console.log(this.selectedAddress)
  }

和变量：

place: "",
selectedAddress: "",
autocomplete: "",

单独查看 Google Autocomplete Address with nuxtJs

See Google Autocomplete Address with nuxtJs separately

javascript

nuxtjs