如何在 v-for 循环中使用 Vueitfy 组合框

Question

我有一个 v-for 循环。循环内部是一个组合框。我在循环中有 3 个项目，所以我有 3 个组合框。当我在一个组合框中键入单词时，它会在其他组合框中显示这些单词。

我知道这与模型和索引有关，但我遇到了困难，需要一些帮助。

这里是代码

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>

脚本：

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

查询：

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)

comboActive 方法用于在输入选择上设置一个类，因此当用户键入时，我可以以用户知道正在发生某些事情的方式设置组合框的样式，即红色边框。

@change="updateTags(item)" 和 @paste="updateTags(item)" 在用户将项目添加到组合框时更新数据库。

注意：保存工作正常。只是在输入过程中，所有组合框都获得相同的值。

非常感谢所有帮助

Answer 1

您需要为每个select 模型分配密钥

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

Answer 2

这不会将所有 3 个组合框绑定到同一个数据属性select 吗？我认为每个选择都需要不同的数据值。