Google 地点自动完成 Vue.js

Question

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

API 声明 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

Answer 1

好的，按照 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>

来自文档的补充：

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

所以

created()

 钩子不是正确的。 

mounted()

就是我们正在寻找的。

Answer 2

有两种方法可以添加谷歌地点自动完成功能。

使用
• 自动完成小部件
使用
• 自动完成数据 APi

对于带有地点建议的自定义下拉搜索，您可以使用数据 API。他们还有

github 代码示例，您可以在其中将原始 js 代码转换为 vuejs 代码。