CODEWITHSUNDEEP
vuetify.js
Maximilian Berbechelov
Maximilian Berbechelov

Reputation: 3

Vuetify's v-select doesn't show all the items for some reason

This is extremely weird for me - my code is very basic:

<v-select
        chips
        multiple
        :items="areas"
         v-model="person.applicant.areas"
        :label="trans('Areas of interest')"
        item-text="name"
        item-value="id"
></v-select>

The items when echoed right before that with {{areas}} returns as follows:

[ 
    { "interestsAreas": "TEst", "id": 0, "name": "TEst" },
    { "interestsAreas": "Test2", "id": 1, "name": "Test2" }, 
    { "interestsAreas": "Something", "id": 0, "name": "Something" },
    { "interestsAreas": "1", "id": 1, "name": "1" },
    { "interestsAreas": "2", "id": 2, "name": "2" },
    { "interestsAreas": "3", "id": 3, "name": "3" }
]

Yet, whatever I do the v-select drops "Something" and "1" out of the dropdown even if I rename them or whatever.

I can't catch the logic behind dropping some of them, is there any known bug or something that I am not doing right in the invocation?

Upvotes: 0

Views: 665

Answers (1)

Ninth Autumn
Ninth Autumn

Reputation: 461

I am guessing it has something to do with the item-value, as id needs to be unique

[ 
    { "interestsAreas": "TEst", "id": 0, "name": "TEst" },
    { "interestsAreas": "Test2", "id": 1, "name": "Test2" }, 
    { "interestsAreas": "Something", "id": 0, "name": "Something" },// the id value is already used so try changing it 
    { "interestsAreas": "1", "id": 1, "name": "1" },//same for this one as well
    { "interestsAreas": "2", "id": 2, "name": "2" },
    { "interestsAreas": "3", "id": 3, "name": "3" }
]

Upvotes: 1

Related Questions