Google 地点自动完成 Vue.js

我正在尝试在 Vue.js 中实现 Google Places Autocomplete。

The API 指出 https://developers.google.com/maps/documentation/javascript/reference#Autocomplete the Autocomplete课程首先需要一个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

好的，按照 Matthew Jibin 的建议使用ref，我让它出现了。还有很多事情要做，但最初的障碍已经克服了。

<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>

来自文档的补充：

关于裁判注册时间的重要说明：因为裁判 它们本身是渲染函数的结果，你不能 在初始渲染时访问它们 - 它们还不存在！

So the created()钩子不是正确的。mounted()这就是我们正在寻找的。