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!

can you provide some links to the code means replica of your code so I can understand more about your query ? — Nilesh Mishra, Feb 02 '22 at 18:54
@JuanCarlosAlfonsoVergel nope, I ended up just passing an unpaginated list to the autocomplete field. Will probably have to revisit this in the future. — a.fahmiin, May 05 '22 at 19:03

score 0 · Accepted Answer · answered May 12 '22 at 13:29

@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>

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

1 Answers1