when using vuetify and an I’m trying to populate a select box…
…using this JSON Object:
[
{
“configurator”: {
“group”: {
“property”: [
{
“id”: “STATUS”,
“value”: [
{
“id”: “OK”,
“text”: “OK”
},
{
“id”: “NOK”,
“text”: “not OK”,
“selected”: “true”
}
]
}
]
}
}
}
]
…and I’m trying to render this component:
<v-list v-for=”(item, i) in jsonObjPruef.configurator.group.property” :key=”i”>
<v-select
v-model=”item.value”
:items=”item.value”
:label=”item.text”
/>
</v-list>
Page loads without warnings and errors and I can select from the expected values (“OK”, “not OK”).
While choosing e.g. “OK” the following warning is displayed:
[vue.js warn]: Invalid prop: type check failed for prop “items”. Expected Array, got String with value “OK”.
And now if I’m trying to select again I only can pick the value I chose before (“OK”).
The select option entries are only shown on the first select attempt.
Any idea what I’m missing here?
Solution :
tl;dr: v-model means: “where user selection is saved”. If you save it over the same exact property which holds the options, the options are gone and the <v-select> is broken.
v-model replaces jsonObjPruef.configurator.group.property with the selected option, when you select it. Which makes the <v-select> no longer have items.
You should specify a different v-model - a model property in which you store the selection, (i.e: results):
<v-list v-for=”(item, i) in jsonObjPruef.configurator.group.property” :key=”i”>
<v-select
v-model=”results[i]“
:items=”item.value”
:label=”item.text”
/>
</v-list>
In data, you need to initialize results : {}.
Now results will hold the selected results and you can place a watcher on it to trigger additional functionality when it changes. It doesn’t have to be an object, it could be an array. It depends on what you currently have.
Obviously, you can rename results to something less generic, which makes more sense in the specific example.
If you need more help, please add a mcve.