<template>
  <v-autocomplete
    v-model="search"
    :items="items"
    item-text="name"
    item-value="id"
    @change="onItemChange"
    @input="fetchMoreItems"
    dense
    hide-no-data
    hide-details
    label="Search"
    clearable
  ></v-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
import { useCookie } from "@core/composable/useCookie";

const search = ref('');
const items = ref([]);
const currentPage = ref(1);
let totalPage = 1;
const accessToken = useCookie('accessToken').value;

const fetchMoreItems = async () => {
  // Reset current page when the search term changes
  currentPage.value = 1;

  try {
    const response = await fetch(`API?per_page=10&term=${search.value}&page=${currentPage.value}`, {
      headers: {
        'Authorization': `Bearer ${accessToken}`
      }
    });
    const data = await response.json();
    totalPage = data.pagination.last_page;

    // Update items list with new data
    items.value = data.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const onItemChange = () => {
  // Handle the selected item change event
};
</script>

I’m using vue 3 with vuetify library to created something which is infinte scroll with V-Autocomplete but it’s not working.. the data are {name and id}.

i want to be able to select multiple items and show them in V-Chips.