Open ilteris opened 4 years ago
Hmmm, I’m not sure. Could you post the code for the rest of your component. What are you returning from your search function?
Thanks for the response. Below is the error I get when I press enter/return.
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '-1' of undefined"
found in
---> <Autocomplete>
<AppBar> at src/components/AppBar.vue
<SearchView> at src/views/SearchView.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js:619
logError @ vue.runtime.esm.js:1884
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6917
23:04:41.250 vue.runtime.esm.js:1888 TypeError: Cannot read property '-1' of undefined
at autocomplete.esm.js:160
at invokeWithErrorHandling (vue.runtime.esm.js:1854)
at HTMLInputElement.invoker (vue.runtime.esm.js:2179)
at HTMLInputElement.original._wrapper (vue.runtime.esm.js:6917)
logError @ vue.runtime.esm.js:1888
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6917
search (input) method works fine with no problem returns me a JSON object/ Please see the AppBar component which has autocomplete @submit but it never gets called. Thanks!
<template>
<header
:class="{ scrolled: !view.atTopOfPage }"
class=" h-16 fixed flex w-full top-0 items-center bg-white border-b border-grey-300 "
>
<div class="flex-initial ml-4">
</div>
<autocomplete
:search="search"
placeholder="Search"
aria-label="Search"
@submit="handleSubmit"
:debounceTime="500"
/>
<div class="block align-middle mr-4">
<template v-if="isAuthenticated">
<md-menu md-direction="bottom-start" :md-close-on-click="true">
<base-avatar
md-menu-trigger
class=" focus:outline-none hover:ripple-bg-white-800 cursor-pointer"
:src="user.photoURL"
size="sm"
/>
<md-menu-content>
<md-menu-item v-for="(item, i) in items" :key="i" @click="logOut">
{{ item.title }}
</md-menu-item>
</md-menu-content>
</md-menu>
</template>
<template v-else>
<button
class="bg-blue-500 hover:bg-blue-700 font-semibold text-white py-2 px-4 rounded"
@click="signInWithGoogle"
>
Sign in with Google
</button>
</template>
</div>
</header>
</template>
<script>
import BaseAvatar from "@/components/BaseAvatar";
import Autocomplete from "@trevoreyre/autocomplete-vue";
import "@trevoreyre/autocomplete-vue/dist/style.css";
export default {
components: {
BaseAvatar,
Autocomplete
},
data: () => ({
items: [{ title: "Log out" }],
view: {
atTopOfPage: true
}
}),
computed: {
isAuthenticated() {
return this.$store.getters.isAuthenticated;
},
user() {
return this.$store.getters.user;
},
currentRoute() {
return this.$route.name;
}
},
beforeMount() {
window.addEventListener("scroll", this.handleScroll);
},
methods: {
signInWithGoogle() {
this.$store
.dispatch("signInWithPopAction")
.then(() => {
this.$router.replace("admin");
})
.catch(function(error) {
console.log("error" + error);
});
},
logOut() {
this.$store
.dispatch("signOut")
.then(() => {
console.log("logged out");
this.$router.replace("login");
})
.catch(function(error) {
console.log(error);
});
},
search(input) {
const obj = {
corpus_project_id: this.$route.params.project_id,
search_query: input
};
if (input.length > 0) {
this.$store.dispatch("queryVideos", obj);
}
},
handleSubmit(result) {
alert(`You selected ${result}`);
},
handleScroll() {
// when the user scrolls, check the pageYOffset
if (window.pageYOffset > 0) {
// user is scrolled
if (this.view.atTopOfPage) this.view.atTopOfPage = false;
} else {
// user is at top of page
if (!this.view.atTopOfPage) this.view.atTopOfPage = true;
}
}
}
};
</script>
<style scoped>
header {
z-index: 10;
}
header.scrolled {
@apply shadow-xl;
border-bottom: 0px;
}
</style>
I think your problem is that the search
function should always return something. If you want to return no results, you should return []
, but right now you're returning nothing.
I love this component. Thank you for building it. For some reason I am getting this error @submit is called. Input method works fine, I could get the input in the method.
this is my template.
<autocomplete :search="search" ref="searchInput" @submit="handleSubmit"> </autocomplete>
Even if my handleSubmit(result){} is empty I still get this. What could I be missing?