我尝试使用Google Places Autocomplete API来填充Vuetify Autocomplete组件，如下所示：
<template>
<v-autocomplete
ref="autocomplete"
label="Location"
>
</v-autocomplete>
</template>
<script>
export default {
mounted() {
var autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(this.$refs.autocomplete),
{types: ['geocode']})
}
}
</script>
然而，在浏览器的开发人员控制台中，它抛出了一个错误：
InvalidValueError：不是HTMLInputElement 的实例
我的猜测是v-autocomplete不是HTMLInputElement类型。
(这不仅仅是v-autocomplete的情况：用v-input替换它也会出现同样的错误。(
有没有办法用Google Places自动完成API来填充v-autocomplete，比如手动使其成为HTMLInputElement的实例？
仅使用google.maps.places.Autocomplete似乎无法直接保持v-autocomplete的材质外观。为了实现这一点，我封装了API的getPlacePredictions()方法，而不是一个组件，称为AutocompleteService:
PlacesUtils.js
/* global google */
const GetSuggestions = async searchText => {
let result
try {
const rawResult = await searchLocation(searchText)
result = rawResult.map((res) => {
return {
id: res.place_id,
value: res.description
}
})
} catch (err) {
console.log('An error occurred', err)
result = null
}
return result
}
// Auxiliary functions
// wrap google api's callback to an async function
const searchLocation = async val => {
let promise = await new Promise((resolve, reject) => {
var displaySuggestions = (predictions, status) => {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
reject(status)
}
resolve(predictions)
}
var service = new google.maps.places.AutocompleteService()
service.getPlacePredictions({
input: val,
types: ['geocode']
},
displaySuggestions)
}).catch(function (err) { throw err })
return promise
}
export { GetSuggestions }
然后，为v-autocomplete的模型添加一个watch，我根据用户的更改调用此方法，如下所示：
Place.vue
<template>
<v-layout row justify-center>
<!-- ... -->
<v-autocomplete
label="Location"
v-model="autocompleteLocationModel"
:items="locationFoundItems"
:search-input.sync="locationSearchText"
item-text="value"
item-value="id"
hide-no-data
return-object
>
</v-autocomplete>
<!-- ... -->
</v-layout>
</template>
<script>
/* eslint handle-callback-err: "warn" */
import { GetSuggestions } from '@/utils/PlaceUtils'
export default {
data () {
return {
autocompleteLocationModel: null,
locationSearchText: null,
locationEntries: []
}
},
computed: {
locationFoundItems () {
return this.locationEntries
}
},
watch: {
locationSearchText (newVal) {
var _vue = this
// If less than 3 chars typed, do not search
if (!newVal || newVal.length <= 3) return
// Call the method from the previous section here
GetSuggestions(newVal)
.then(function (res) {
_vue.locationEntries = res
})
.catch(function (err) {
// error handling goes here
})
}
}
// ...
}
</script>
我现在也在处理这个问题，并让它部分工作，当我完全清除它时会更新，但现在你的代码有问题。
在模板中应用ref="autocomplete"时，将ref应用于组件而不是输入。为了让它发挥作用，我设置了一个id="autocomplete"，它直接应用于输入，在我安装的函数中创建了一个变量来引用输入id，然后我将其传递到自动完成函数中。我在下面更新了您的代码以反映这一点。
<template>
<v-autocomplete
id="autocomplete"
label="Location"
>
</v-autocomplete>
</template>
<script>
export default {
mounted() {
var autocompleteInput = document.querySelector('#autocomplete');
var autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(autocompleteInput),
{types: ['geocode']})
}
}
</script>
您可以将相同的原理应用于v-text field，但谷歌自动完成结果将显示在输入下方自己的容器中，而不是像v-autocomplete那样显示在选择下拉容器中。
@vahdet我想感谢您的代码，在您的代码中，我使用了一个完整的组件，它在"地方；谢谢你的帮助！
<template>
<v-layout row justify-center>
<!-- ... -->
<v-autocomplete
label="Location"
id="decoy"
v-model="autocompleteLocationModel"
:items="locationFoundItems"
:search-input.sync="locationSearchText"
item-text="value"
item-value="id"
hide-no-data
return-object
>
</v-autocomplete>
<!-- ... -->
</v-layout>
</template>
<script>
/* eslint handle-callback-err: "warn" */
import { GetSuggestions } from "../../../PlacesUtils";
export default {
data() {
return {
autocompleteLocationModel: null,
locationSearchText: null,
locationEntries: [],
};
},
computed: {
locationFoundItems() {
return this.locationEntries;
},
},
watch: {
autocompleteLocationModel(newVal) {
console.log(newVal.id);
let resplace = new google.maps.places.PlacesService(
document.getElementById("decoy")
);
resplace.getDetails(
{
placeId: newVal.id
},
(x) => {
this.$emit("place", x);
}
);
},
locationSearchText(newVal) {
var _vue = this;
// If less than 3 chars typed, do not search
if (!newVal || newVal.length <= 3) return;
// Call the method from the previous section here
GetSuggestions(newVal)
.then(function(res) {
_vue.locationEntries = res;
})
.catch(function(err) {
// error handling goes here
console.log(err);
});
},
},
};
</script>