How to filter duplicate template item in autocomplete vuetify

Question

ers !

I'm having mapped autocomplete from an array of object. In each of these autocomplete, I binded an :item value which is another array containing informations I want to display.

Notice that EACH occurence of my autocomplete have to display the SAME array and object but differents props from the same object, depending on one value passed as props. Array(:item) > object > props[0] on autocomplete[0], props[1] on autocomplete[1],

So, to sum up : <Autocomplete[0] label="name"> <Autocomplete[1] label="mission"> .. etc

Therefore, I made a template in my autocomplete : <template #item="{ item }"> because I cannot display the info directly in item-value or item-text (see below) or at least, I didn't firgured out how to do...

And the informations I want to display are found in

 {{ item.properties[label.replace('filters.', '')] }}

item.properties is an object that my :items contains, with multiple props and as you can see, I'm looping on ALL my object in my :items to display the specific props contained in every object, item.properties"value" depending on my autocomplete loop and therefore in the value of "label".

This is working fine, but my issue is that I have duplicate in my items in my autocomplete.

So, in my autocomplete item list, for example, i have

   <template #item="{ item }">
  <v-list-item-action>
    <v-checkbox :input-value="isChecked(item)"></v-checkbox>
  </v-list-item-action>
  <v-list-item-content @click="isChecked(item)">
    <span class="pr-2">
      {{ item.properties[label.replace('filters.', '')] }}
    </span>
  </v-list-item-content>
</template>

OUTPUT : "repatriation",  "delivery", "repatriation" , "repatriation" , "delivery", "delivery"...

I've seen many tips and tricks to remove duplicate but ... I didn't figured how to remove them directly from the template ? Because my value {{ item.properties[label.replace('filters.', '')] }} is directly from my :item autocomplete component and from props of my component. Is there a way to remove duplicate in the way I did my stuff ? Did I do my stuff in a wrong way ?

I tried filter directly into the {{ }} but it's not working

Plus, when I select a item in the list, every other item become "selected" from autocomplete template...

Thanks in advance for anyone answering !

Jérome BORGA Jérome BORGA · Accepted Answer · 2021-09-29T11:43:00

PROBLEM SOLVED :

 :item-value="(item) => item.properties[label.replace('filters.', '')]"
 :item-text="(item) => item.properties[label.replace('filters.', '')]"

How to filter duplicate template item in autocomplete vuetify

1 Answers