My Vuetify v-select component is set up like this:
<v-select
:name="search['type']"
v-model="type"
:items="typeOptions"
label="Type"
>
</v-select>
The typeOptions array looks like this:
typeOptions: [
{ text: 'Residential', value: 'residential' },
{ text: 'Commercial', value: 'commercial' },
{ text: 'Land', value: 'land' },
{ text: 'Other', value: 'other' },
]
An issue arises because although v-model retains the correct value, the input element named search['type'] does not store any value. This prevents me from including the v-select component in a form that needs to be submitted.
You can view my codepen here.
One way I could address this is by adding a hidden input based on the v-model, but I don't consider it the most elegant solution. I believe this should work as intended and I'm puzzled by why it isn't behaving properly.
Thank you for any assistance.