I'm trying to make a form full of <v-bobox> that basically autopletes 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-bobox> 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-bobox
    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 autoplete 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.

I'm trying to make a form full of <v-bobox> that basically autopletes 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-bobox> 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-bobox
    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 autoplete 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.

• javascript
• vue.js
• bobox
• vuejs2
• vuetify.js

• could you provide the script? – Boussadjra Brahim Commented Oct 16, 2018 at 12:41

2 Answers 2

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-bobox to work as expected.

<v-bobox
    :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 plex use of the bobox in the future, I've solved this one. Weirdly the standard :item-value prop does not work with a multi-bobox 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-bobox
        :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 boboxes and use the same script to fetch for all of them while still having them function independently as intended.

For Vue 3.0 we have a small change: item-title instead item-text

<v-bobox
  :items="[{ key: 'john', value: '1' }, { key: 'Marie', value: '2' }]"
  item-title="key"
  item-value="value"
  label="ComboBox"
/>