[Vuejs]-Why doesn't combobox update edited item model?

by

0👍

✅

I figured out how to solve it, however I consider it rather as a non elegant workaround.

To make things clear: I needed both id and name to be passed to the combobox. The id is read-only, while name entry has to be editable. id gets passed to the values model thanks to item-value="id" added to the combobox definition (it’s already commented in discussion below Germano Buss Niehues‘ answer). name was only updated by the model when item was selected, but not after it was edited. And the edited value of name is the thing I needed.

Eventually, I added the plain HTML id field to the combobox:

<template>
   <v-combobox
     clearable
     id="words_names"
     v-model="values"
     :items="items"
     item-text="name"
   ></v-combobox>
</template>

and read the final value with:

document.getElementById("words_names").value

As I said, not very elegant but does its job…

0👍

the attribute item-value is missing, you can do something like this:

 items: [
            {"id": 2, "name": "tree", "value" : 1},
            {"id": 4, "name": "grass", "value" : 2},
            {"id": 5, "name": "freeze", "value" : 3},
            {"id": 9, "name": "moss", "value" : 4}
        ],

and in your tag

  <v-combobox
   clearable
   v-model="values"
   :items="items"
   item-text="name"
   item-value = "value"
   @change = "values()"
   ></v-combobox>

Leave a comment