Search code examples
javascriptvue.jscomboboxvuejs2vuetify.js

Vuetify Combobox Not Returning id instead of value


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.


Solution

  • 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.