我想知道将 gmap-autocomplete 字段设置为 vuetify v-text-field 样式的最佳方法是什么。 我查看了 Vuetify-google-autocomplete 模块，但它抛出了很多错误并且比我预期的更多或问题。
最简单的方法是什么
<gmap-autocomplete></gmap-autocomplete>
看起来像
<v-text-field></v-text-field>
不改变功能
【问题讨论】：
标签： google-maps vue.js vuejs2 vuetify.js
我已经用 vue 和 vuetify 实现了一个谷歌地址自动完成。
您需要使用“v-autocomplete”而不是“v-text-field”。它也是一个 vuetify 组件
我将分享一些关于我的基本实现的代码（我的组件更复杂）
请记住将您的 APIKEY 放在 URL 中
另外，在我的实现中，我添加了 debounce 库以在自动完成中添加一些延迟，如果您愿意，我可以添加具有此功能的代码
代码：
<template>
<v-autocomplete
prepend-icon="account_box"
v-model="address"
:items="items"
name="address"
:search-input.sync="search"
label="Address"
placeholder="Address"
class="pa-3"
autocomplete="off"
:loading="loading"
:filter="d=>d"
color="secondary"
item-color="secondary"
return-object
@change="change"
></v-autocomplete>
</template>
<script>
export default {
data() {
return {
items: [],
search: null,
address: null
}
},
watch: {
search(){
//Optional: here you can add some delay
this.googleSearch()
}
},
methods: {
googleSearch() {
let url = 'https://maps.googleapis.com/maps/api/geocode/json?key={YOURAPIKEY}&address='
fetch(url + this.address)
.then((response) => {
return response.json()
})
.then(jsonResult => {
this.items = jsonResult.map(item => {
//You can explore and use other information inside "item" like latitude, longitude, country, City, zipCode
return {
text: item.formatted_address,
value: item.formatted_address
}
})
}).catch(err => {
//handle errors
console.log(err)
})
}
}
}
</script>
【讨论】：
试试这个，对我有用： https://www.npmjs.com/package/vuetify-google-autocomplete
npm i vuetify-google-autocomplete
我需要将“id”绑定到唯一的东西，以便在同一页面上拥有该字段的多个实例。
【讨论】：
虽然没有使用完全相同的东西，但我发现我必须将元素全局设置为我想要的样式。
以下代码是我使用的：
<style global>
#vuetify-google-autocomplete-id {
border-top-width: 0px !important;
border-right-width: 0px !important;
border-bottom-width: 0px !important;
border-left-width: 0px !important;
}
</style>
我希望它可以帮助任何正在寻找解决方案的人。
【讨论】：