GoogleプレイスオートコンプリートVue.js

Question

GoogleプレイスオートコンプリートをVue.jsに実装しようとしています。

API states that​​3210クラスは、最初の彼らの例で使用されるように、inputField:HTMLInputElement取ります

autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
    {types: ['geocode']}); 

我々はVue.jsで自分のIDのことで周りの要素を渡すことはできませんので？これはどのように達成され、どのような構造物が通過するでしょうか？

次のコードは、エラーと

<template> 
    <input id="autocomplete" placeholder="Enter your address" type="text"></input> 
</template> 

<script> 
    export default { 
    created() { 
     var autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
    {types: ['geocode']}); 
    } 
    } 
</script> 

を失敗：

InvalidValueError: not an instance of HTMLInputElement 

Answer 1

[OK]をのでrefを使用するには、マシューJibinの提案以下、私はそれが現れるようになりました。もっと多くのことができますが、初期のハードルは克服します。

<template> 
    <input ref="autocomplete" 
     placeholder="Enter your address" 
     type="text" 
    /> 
</template> 

<script> 
    export default { 
    mounted() { 
     var autocomplete = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */(this.$refs.autocomplete), 
     {types: ['geocode']}); 
    } 
    } 
</script> 

ドキュメントからワン加え、：

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet!

のでcreated()フックが正しいものではありません。 mounted()が私たちが探しているものです。