javascript - Google Places 自动完成 Vue.js

Question

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

API states that 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>

另外一个，来自文档:

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()钩子(Hook)不对。 mounted()正是我们正在寻找的。