TypeError: Cannot read property '-1' of undefined

[ilteris]

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?

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
17:27:37.745 ```

[trevoreyre]

Hmmm, I’m not sure. Could you post the code for the rest of your component. What are you returning from your search function?

[ilteris]

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>

[trevoreyre]

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.