Vuetify search-input.sync for v-autocomplete inside v-for

Question

I have a line_items array, iterated using v-for. For each of the line_item object, I need a v-autocomplete element that is used to search for category.

Currently, I'm using the search-input.sync="searchText" to do sync search as the user types into the text input box. This works well if there is a single line_item object, but if there are 2 or more, the searchText change affects all other line_items too.

Example code:

<div v-for="line_item in line_items">
  <v-autocomplete
    :items=""categories
    :search-input.sync="searchText"
    placeholder="Select category"
  ></v-autocomplete>
</div>

And I'm using the watch method from the composition API to watch for changes in searchText like so:

const searchText = ref(null)
watch(searchText, query => fetchCategories(query))

How do I go about correcting this problem? If possible, I'd really like to keep the .sync behavior so that the search function fires off whenever user inputs something. TIA!

Answer 1

@Fahmiin I create a custom component to create rows with autocomplete inside, like:

      <QuickOrderForm
        v-bind:key="index"
        :productIndex="index"
        :item="item"
        :productOptions="productOptions"
        :optionSelected="optionSelected"
        :priceFormat="priceFormat"
        @update-order-data="productOptionSelected"
      />

And QuickOrderForm has like this:

template>
  <v-row class="rowMain">
    <v-autocomplete
      v-model="itemSku"
      :loading="loading"
      :items="resultSearchItem"
      :search-input.sync="search"
      @focus="resultSearchItem = []"
      hide-selected
      class="mx-4"
      hide-no-data
      hide-details
      outlined
      placeholder="Enter Product SKU"
    ></v-autocomplete>
    <v-text-field
      v-model="qty"
      placeholder="Qty #"
      :disabled="itemSku === '' ? true : false"
      outlined
      type="number"
    ></v-text-field>
    <v-text-field
      prefix="$"
      v-model="priceFormat"
      outlined
      disabled
    ></v-text-field>
  </v-row>
</template>