为什么@googlemaps/js-api-loader的自动完成数据不能通过v-model绑定传递给数据对象？
为什么@googlemaps/js-api-loader的自动完成数据不能通过v-model绑定传递给数据对象？
提问于 2021-04-11 11:13:30
我的Vue CLI项目使用Google Maps API来处理来自用户输入的位置。加载程序按如下方式导入：
import { Loader } from "@googlemaps/js-api-loader";并且，它是这样实例化的：
const loader = new Loader({
apiKey: "XXXXX",
version: "weekly",
libraries: ["places"]
});我有一个文本输入元素，它接受来自用户的位置：
<input type="text" v-model="origin" id="origin" placeholder="Where are you?" />它使用Google Maps API的Autocomplete类来建议或自动完成地址(代码位于Vue实例的已创建对象/选项中)：
loader
.load()
.then(() => {
new window.google.maps.places.Autocomplete(
document.getElementById("origin"),
{
componentRestrictions: { country: "za" },
fields: ["address_components", "geometry", "icon", "name"],
}
);
});现在，假设我想输入地址"123 Mandela Street，Some Suburb，2021年“，然后键入"123 Ma”，然后单击自动完成的地址，data.origin将只有"123 Ma“，而不是完整地址。我哪里错了？
Stack Overflow用户
发布于 2021-04-11 13:55:56
根据文档here，Autocomplete会向您的网页添加一个文本输入字段，并监视该字段中是否有字符输入。因此，无论用户在您的文本输入字段中输入什么，在绑定中传递给数据对象的数据都将保持不变。
在选项中为place_changed事件和formatted_address字段添加一个处理程序是检索用户选择/添加的地址的实用方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67041121
复制相关文章
相似问题
腾讯云开发者
