Vue複数の入力フィールドを自動補完する

場合によっては、複数の入力フィールドに場所の自動補完機能を追加することもあります.
典型的な例は、2つの場所の間の移動距離を見つけるでしょう.その場合、ユーザは自動補完機能を有効にした2つの入力フィールドを持ちます.
つの入力フィールドのautocompleteオブジェクトをインスタンス化する方法を見てみましょう.

単一の入力フィールドの自動補完

Vueテンプレートで、ref属性で入力フィールドを定義します.

<input type="text" placeholder="Origin" ref="origin" />

mounted ()関数の内部で、伝統的なIDを使用するよりも効率的なref属性を使用して、入力フィールドDOM要素を渡すことでautocompleteオブジェクトをインスタンス化します.

mounted() {
    const autocomplete = new google.maps.places.Autocomplete(this.$refs["origin"]);
},

かなりまっすぐ前方!
あなたのために動作しない場合は、場所にJavaScriptライブラリをインデックスに追加してください.HTMLファイル.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

Also, make sure to enable both the Maps JavaScript API & Places API libraries in the Google Cloud Console website if you haven’t done so already.

複数の入力フィールドの場所Autocomplete

別の入力フィールドを追加しましょう.

<input type="text" placeholder="Origin" ref="origin" />
<input type="text" placeholder="Destination" ref="destination" />

ご存知のように、Vueテンプレート内のHTML要素に値を持つref属性を追加すると、これに追加されますJavaScriptオブジェクトをrefsする.
これでループしましょうrefsオブジェクトとアクセス入力DOM要素を動的に指定します.

mounted() {
    for (let ref in this.$refs) {
       console.log(this.$refs[ref]);
    }
}

次に、ループ内の各入力フィールドに対してautocompleteオブジェクトをインスタンス化します.

mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);
    }
}

Clickイベントを自動補完オブジェクトにアタッチする

ユーザーが選択したアドレスを取得するには、自動補完オブジェクトにPlaceRound Changedイベントをアタッチする必要があります.

mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);

      autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();
        console.log(place);
       }
    }
}

あそこにある.