如何在 v-for 循环中使用 Vueitfy 组合框 [英] How to use Vueitfy combo box in a v-for loop

问题描述

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

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

这是代码

HTML:

<v-组合框多个v-model="选择"附加图标小芯片可删除芯片@keyup="comboActive"@paste="updateTags(item)"@change="updateTags(item)"></v-组合框>

脚本:

data() {返回 {选择: []}}

查询:

让线索Ref = db.collection('线索')线索Ref.onSnapshot(快照=> {var c = []快照.forEach(doc => {this.clue = doc.data()this.clue.id = doc.idc.push(this.clue)})这个.线索 = c如果(this.clue.locationimagetext)this.select = this.splitJoin(this.clue.locationimagetext)

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

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

注意:保存工作正常.它只是在打字期间所有组合框都获得相同的值.

非常感谢所有帮助

解决方案

你需要为每个select模型分配key

<v-组合框多个v-model="选择[i]"附加图标小芯片可删除芯片@keyup="comboActive"@paste="updateTags(item)"@change="updateTags(item)"></v-组合框>

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

解决方案

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>

这篇关于如何在 v-for 循环中使用 Vueitfy 组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！