Vue中v-for设置唯一key后新行仍复制旧状态的问题排查

问题描述 #

我尝试给v-for循环生成的每个组件设置key，点击按钮后希望生成一行Bootstrap列。因为没有初始可遍历数组，还是用了v-for方案，所以必须设key避免报错。

点击提交按钮前：一行带有深色背景空卡片的行
点击后结果：新生成的行复制了旧行的卡片样式（比如部分卡片变成绿色或黄色），而非全新的深色空卡片

我的目标是生成带有原始样式的新行，但目前新行似乎复制了旧行的状态。我不明白为什么代码没生成唯一key，key里的guess部分来自存储ID字符串的数组。相关代码如下：

App.vue模板：

<ul id="guessList" class="list-unstyled">
    <li v-for="guess in guessIDs" :key="guess">
        <div :id="guess" class="row justify-content-center align-self-center mb-3">
            <MoveGroup v-for="n in lengthGuess"
            :key="`${guess}_move_group${n}`">{{ n }}</MoveGroup>
        </div>
    </li>
</ul>

App.vue脚本：

export default {
    name: 'boardApp',
    data() {
        return {
            lengthGuess: 0,
            opening: [],
            movesPlayed: [],
            remainingGuesses: 5,
            guessIDs: ['guess1']
        }
    },
    methods: {
        setMode(value) {
            this.lengthGuess = value
            const self = this
            const fetch_url = document.querySelector('#app').getAttribute(
                'fetch-url')
            return fetch(fetch_url + '?move_count=' + value)
            .then((response) => response.json())
            .then((result) => {
                self.opening = result.moves
            })
        },
        storeMove(move) {
            this.movesPlayed.push(move)
        },
        undoMove() {
            this.movesPlayed.pop()
        },
        clearMoves() {
            this.movesPlayed = []
        },
        checkGuess() {
            if (this.movesPlayed.length < this.lengthGuess * 2) {
                alert('You must play more moves.')
                return
            }
            for (let i = 0; i < this.lengthGuess * 2; i++) {
                const move = this.movesPlayed[i]
                const answer = this.opening[i]
                const guessNum = 6 - this.remainingGuesses
                const moveCard = document.querySelectorAll(
                    `#guess${guessNum} .card`)[i]
                if (move == answer) {
                    moveCard.classList.remove('bg-dark')
                    moveCard.classList.add('bg-success')
                }
                else if (this.opening.find((_str) => _str == move)) {
                    moveCard.classList.remove('bg-dark')
                    moveCard.classList.add('bg-warning')
                }
            }
            this.remainingGuesses--
            this.guessIDs.push(`guess${6 - this.remainingGuesses}`)
        },
    },
    components: { MoveGroup, ModalInstructions, ChessBoard }
}

MoveGroup组件：

<template>                                                                                                                
    <div class="d-flex col">                                                                                              
        <span class="mx-1" style="font-size:1.5rem; font-weight:bold;">                                                   
            <slot/>.                                                                                                      
        </span>                                                                                                           
        <div>                                                                                                             
            <div class="card bg-dark" style="width:4rem; height:4rem;">                                                   
                <div class="card-body row">                                                                              
                    <p class="card-text align-middle align-self-center text-center text-light">                           
                    </p>                                                                                                  
                </div>                                                                                                    
            </div>                                                                                                        
        </div>                                                                                                            
        <div class="col-1"></div>                                                                                         
        <div>                                                                                                             
            <div class="card bg-dark" style="width:4rem; height:4rem;">                                                   
                <div class="card-body row">                                                                              
                    <p class="card-text align-middle align-self-center text-center text-light">                           
                    </p>                                                                                                  
                </div>                                                                                                    
            </div>                                                                                                        
        </div>                                                                                                            
    </div>                                                                                                                
</template>

请问我哪里出错了？

问题原因 #

你直接通过document.querySelectorAll操作DOM修改卡片class，违反了Vue数据驱动DOM的核心原则。Vue的虚拟DOM会复用已存在的DOM节点优化渲染性能，当你手动修改旧行的DOM样式后，新增行时Vue可能复用这些被修改过的节点（即使key唯一），导致新行继承旧行样式。

另外，guessIDs仅存储字符串ID，未记录每个guess对应的卡片状态，无法通过数据区分新旧行的样式差异。

解决方案 #

改用数据驱动方式管理每个guess的卡片状态，禁止直接操作DOM：

1. 重构数据结构：将guessIDs改为对象数组，存储每个guess的ID和卡片状态

data() {
    return {
        // ...其他数据
        guesses: [
            {
                id: 'guess1',
                cardStates: [] // 存储每个卡片的背景类，初始为空则用bg-dark
            }
        ]
    }
}

2. 修改checkGuess方法：通过数据记录卡片状态，而非直接操作DOM

checkGuess() {
    if (this.movesPlayed.length < this.lengthGuess * 2) {
        alert('You must play more moves.')
        return
    }
    const currentGuessIndex = this.guesses.length - 1
    const currentGuess = this.guesses[currentGuessIndex]
    currentGuess.cardStates = []
    
    for (let i = 0; i < this.lengthGuess * 2; i++) {
        const move = this.movesPlayed[i]
        const answer = this.opening[i]
        let bgClass = 'bg-dark'
        
        if (move == answer) {
            bgClass = 'bg-success'
        } else if (this.opening.includes(move)) {
            bgClass = 'bg-warning'
        }
        
        currentGuess.cardStates.push(bgClass)
    }
    
    this.remainingGuesses--
    // 新增guess时初始化空卡片状态
    this.guesses.push({
        id: `guess${6 - this.remainingGuesses}`,
        cardStates: new Array(this.lengthGuess * 2).fill('bg-dark')
    })
    this.clearMoves() // 清空步数准备下一轮
}

3. 更新App.vue模板：绑定卡片class到对应数据

<ul id="guessList" class="list-unstyled">
    <li v-for="guess in guesses" :key="guess.id">
        <div :id="guess.id" class="row justify-content-center align-self-center mb-3">
            <MoveGroup 
                v-for="n in lengthGuess" 
                :key="`${guess.id}_move_group${n}`"
                :card-states="guess.cardStates.slice((n-1)*2, n*2)"
            >{{ n }}</MoveGroup>
        </div>
    </li>
</ul>

4. 修改MoveGroup组件：接收卡片状态并绑定到DOM

<template>                                                                                                                
    <div class="d-flex col">                                                                                              
        <span class="mx-1" style="font-size:1.5rem; font-weight:bold;">                                                   
            <slot/>.                                                                                                      
        </span>                                                                                                           
        <div>                                                                                                             
            <div :class="['card', cardStates[0]]" style="width:4rem; height:4rem;">                                                   
                <div class="card-body row">                                                                              
                    <p class="card-text align-middle align-self-center text-center text-light">                           
                    </p>                                                                                                  
                </div>                                                                                                    
            </div>                                                                                                        
        </div>                                                                                                            
        <div class="col-1"></div>                                                                                         
        <div>                                                                                                             
            <div :class="['card', cardStates[1]]" style="width:4rem; height:4rem;">                                                   
                <div class="card-body row">                                                                              
                    <p class="card-text align-middle align-self-center text-center text-light">                           
                    </p>                                                                                                  
                </div>                                                                                                    
            </div>                                                                                                        
        </div>                                                                                                            
    </div>                                                                                                                
</template>

<script>
export default {
    props: {
        cardStates: {
            type: Array,
            required: true
        }
    }
}
</script>

关键说明 #

• 所有样式状态通过数据管理，Vue自动渲染DOM，避免手动操作DOM导致的不一致问题
• 新增guess时初始化cardStates为全bg-dark，确保新行是原始样式
• 每个guess的状态独立存储，新旧行不会互相干扰

内容的提问来源于stack exchange，提问作者Alexandre