Why can't I type anything in my v-autocomplete bar in Vuetify?

I am trying to make a functionality of grabbing a list of users, and that list will depend on what the user types. To achieve that, I am using v-autocomplete. The problem is that when I follow the steps in the vuetify autocomplete page on how to do such a setup, my v-autocomplete bar won't let me type anything.

This is the code that I am using:

 <v-autocomplete v-model="selectedUserId" :items="nonRegisteredSearchUsers" :search-input.sync="search2" hide-no-data hide-selected :item-text="item => item.firstName + '' + item.lastName" item-value="id" label="Users" placeholder="Start typing to search" filled> </v-autocomplete>

This is what the script looks like:

data() {
    return {
      searchUsers: [],

      selectedUserId: null,
      search2: null,
      userSearchDelay: 0
    }
  },
watch: {
    search2() {
      if (this.userSearchDelay)
        clearTimeout(this.userSearchDelay)
      this.searchDelay = setTimeout(this.getSearchUsers, 300)
    }
  },
computed: {
    nonRegisteredSearchUsers() {
      let userList = []
      for (let user of this.searchUsers) {
        if (!this.users.includes(user)) {
          userList.push(user)
        }
      }
      return userList
    }
  },
 methods: {
    getSearchUsers() {
      if (this.search2 != null) {
        apiService.getAdminViewUserIndex(this.search2).then(({ data }) => {
          this.searchUsers = data.users
        })
      }
    }
  },

I tried to remove the sync in hopes of it letting me type again. It did, but I was not able to get any users back. I tried to remove the watch temporarily, but I was still not able to type.

The issue comes from the inline function in :item-text. Looks like since the function will be newly created every time a prop changes, it royally screws up the v-autocomplete.

If you add the function to the component methods and put that into the prop, it works. So in your template, you should use a function stored on the component:

<v-autocomplete
  :item-text="printItem"
  ...

and accordingly in the component:

methods: {
  printItem(item){
    return item.firstName + ' ' + item.lastName
  },
}

Have a look at the snippet to see how it

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

const users = Array.from({length: 5}, (_,i) => ({id: i, firstName: 'FN', lastName: 'User'+i}))

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data() {
    return {
      searchUsers: [],

      selectedUserId: null,
      search2: null,
      userSearchDelay: 0
    }
  },
  watch: {
    search2() {
      if (this.userSearchDelay)
        clearTimeout(this.userSearchDelay)
      this.searchDelay = setTimeout(this.getSearchUsers, 300)
    }
  },
  computed: {
    nonRegisteredSearchUsers() {
      return users
    }
  },
  methods: {
    printItem(item){
      return item.firstName + ' ' + item.lastName
    },
    getSearchsearchUsersUsers() {
      if (this.search2 != null) {
        apiService.getAdminViewUserIndex(this.search2).then(({
          data
        }) => {
          this.searchUsers = data.users
        })
      }
    }
  },

})

<!-- language: lang-html -->

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-autocomplete 
          v-model="selectedUserId" 
          :items="nonRegisteredSearchUsers" 
          :search-input.sync="search2" 
          hide-no-data 
          hide-selected 
          :item-text="printItem" 
          item-value="id" 
          label="Users" 
          placeholder="Start typing to search"
          filled
        >
        </v-autocomplete>
          <div>
          selectedUserId: {{selectedUserId}} 
          </div><div>
          search2: {{search2}}
          </div>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<!-- end snippet -->