How to use Vueitfy combo box in a v-for loop

问题

I have a v-for loop. Inside the loop is a combo box. I have 3 items in the loop so I have 3 combo boxes. When I type words into one combo box it displays those words in the other combo boxes.

I know this has something to do with the model and index but I have hit a wall and need some help.

Here is the code

HTML:

<div v-for="(item,i) in clues" :key="i">

<v-combobox multiple
  v-model="select" 
  append-icon
  small-chips
  deletable-chips
  @keyup="comboActive"
  @paste="updateTags(item)"
  @change="updateTags(item)">
</v-combobox>

</div>

SCRIPT:

data() {
    return {
        select: []
    }
}

QUERY:

let cluesRef = db.collection('clues')
    cluesRef.onSnapshot(snapshot => {
        var c = []
        snapshot.forEach(doc => {
            this.clue = doc.data()
            this.clue.id = doc.id

            c.push(this.clue)
        })
        this.clues = c

        if(this.clue.locationimagetext)
            this.select = this.splitJoin(this.clue.locationimagetext)

The comboActive method is used to set a class on the input select so when the user is typing I can style the combo box in a way that the user knows something is happening i.e. red border.

The @change="updateTags(item)" and @paste="updateTags(item)" updates the database as the user adds items to the combo box.

NOTE: saving works fine. its just during the typing that all combo boxes get the same value.

All help is much appreciated

回答1:

You need to assign key to each select model

<div v-for="(item,i) in clues" :key="i">
  <v-combobox multiple
    v-model="select[i]" 
    append-icon
    small-chips
    deletable-chips
    @keyup="comboActive"
    @paste="updateTags(item)"
    @change="updateTags(item)">
  </v-combobox>
</div>

回答2:

Wouldn't this bind all 3 comboboxes to the same data property select? I think you need different data values for each of the selects.

来源：https://stackoverflow.com/questions/57628594/how-to-use-vueitfy-combo-box-in-a-v-for-loop