I'm trying to make a form full of <v-combobox>
that basically autocompletes for the person filling in the form. I've succeeded at doing just that, but I'm having a weird issue. When I actually select an item that the <v-combobox>
suggests it fills in the input correctly. However, when it submits the form it sends the id
in the options array rather than the value that I selected. These seems wrong to me because I set the item-value="key"
to the same as item-text="key"
and the text is correct as the string I want, so why isn't the value?
<v-flex
v-for="key in inputsNames"
v-if="key !== 'id'"
:key="key"
xs12
>
<v-combobox
v-model="editForm[key]"
:item-text="key"
:label="key"
:loading="loading"
:search-input.sync="inputSearch[key]"
:items="searchOptions"
:item-value="key"
cache-items
clearable
prepend-icon="filter_list"
/>
</v-flex>
For example:
Filling the x, y
fields with the autocomplete and the others manually will return the following error message:
**Array to string conversion (SQL: insert into table
(w
, x
, y
, z
) values (test, 5, 4, 1)) **
In this case 5, 4,
should've been two strings.
UPDATE:
Still not solved but I've found that its actually sending the whole item object to the POST.
Update 2019:
I've looked into this issue again and found the answer finally. It's related to the return-object
property which is apparently true by default. Disabling it causes the v-combobox
to work as expected.
<v-combobox
:item-text="(obj) => (obj)[key]"
:item-value="(obj) => (obj)[key]"
v-model="editForm[key]"
:search-input.sync="editForm[key]"
:items="searchOptions"
:return-object="false"
>
Original Solution:
For people with a similarly complex use of the combobox in the future, I've solved this one. Weirdly the standard :item-value
prop does not work with a multi-combobox setup as I've done here. I can't explain why. The solution I've found is to provide a custom mapping to the key for the :items
prop like this:
<v-flex
v-for="key in columns"
v-if="key !== 'id'"
:key="key"
xs12
>
<v-combobox
:item-text="key"
v-model="editForm[key]"
:search-input.sync="inputSearch[key]"
:items="searchOptions.map((obj) => (obj)[key])"
/>
</v-flex>
This will allow you to generate many comboboxes and use the same script to fetch for all of them while still having them function independently as intended.