Vuetify <v-autocomplete> v-model object instead of array doesn't add correctly

1
votes

I'm doing a hobby project with Vuetify input fields in rows. One of the fields is a v-autocomplete field with 'multiple' prop set. I need to bind this v-autocomplete using v-model to an Object. How do I do this?

I've tried:

  • Overriding the template using v-slot.
  • Adding item-value and item-text. This made it display correctly. Nice! Updating doesn't work though. Somehow v-model makes it an array of strings instead of saving as objects. Like so:

Before adding extra items from the list: https://i.imgur.com/UCrxCki.png

After adding extra items from the list: https://i.imgur.com/Iwro6DN.png

The v-model list is no longer filled with objects that have their "action" and "amount" props. Instead it makes it a list of Strings

Code:

Code in template:

<v-layout wrap v-for="(row, index) in rows" :id="index+1 + 'buildorderRow'" v-bind:key="index">
   <v-autocomplete
      v-model="row.actions"                                          
      :items="protoss"
      chips                                            
      item-value="action"
      item-text="action"
      multiple
   >
</v-layout>

Array binded to v-model:

                    actions: [
                        {
                            action: 'Gateway',
                            amount: 5
                        },
                        {
                            action: 'Pylon',
                            amount: 1
                        },
                    ],

Expectation

I expected it to add any selection to the array while maintaining the model structure. Just like it does for reading the array. For instance if I add an action of "Probe" it should create it like shown below. Amount could also be Null/undefined or even completely left out. The important thing is that it pushes the object with the action prop.

{ action: 'Probe', amount: 1 }

1
javascriptvuejs2vuetify.js

1 Answers

5
votes

You can use return-object prop on the autocomplete to get the value as an object. return-object changes the selection behavior to return the object directly rather than the value specified with item-value.

<v-layout wrap v-for=“(row, index) in rows” :id=“index+1 + ‘buildorderRow’” v-bind:key=“index”>
   <v-autocomplete
      v-model=“row.actions”
      :items=“protoss”
      chips
      item-value=“action”
      item-text=“action”
      multiple
      return-object
   >
</v-layout>