Question

我正在尝试在Vue.js中实施Google商家信息自动填充功能。

API states that Autocomplete类首先使用inputField:HTMLInputElement，如其示例所示：

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

因为我们无法通过Vue.js中的ID传递元素？如何实现这一目标，以及我们将通过何种结构？

e.g。以下代码失败

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

来自文档的一个补充：

关于ref注册时间的重要说明：因为refs 它们本身是由渲染函数创建的，你不能在初始渲染中访问它们 - 它们还不存在！

所以created()挂钩不正确。 mounted()是我们正在寻找的。

Google商家信息自动填充Vue.js

1 个答案: