我正在 Vue 中構建井字游戲，當我嘗試重置板時出現此錯誤。
“[Vue 警告]：更新期間發現重復鍵：“確保鍵是唯一的。”
電路板開始在視覺上變形。我得到額外的方塊出現在螢屏上。
我錯過了什么？我的狀態設定正確嗎？
<template>
<h2>{{ msg }}</h2>
<h2 v-if="winner" >Winner: {{ winner }}</h2>
<h2 v-else>Player Move: {{ turn }}</h2>
<div id="board">
<div class="square" v-for="(square, index) in squares" :key="square" @click="takeTurn(index)">
{{ square }}
</div>
</div>
<button @click="reset">
Reset
</button>
</template>
<script>
import { ref, computed } from 'vue'
export default {
name: 'MainBoard',
props: {
msg: String // Vue has prop typechecking by default
},
setup () {
const turn = ref('X') // player first turn
const squares = ref([])
for (let i = 0; i <= 8; i ) squares.value.push('') // make a blank board}
console.log('squares value: ' squares.value)
const winner = computed(() => checkForWinner(squares.value.flat())) // check 4 winner everytime board changes
console.log('computed:' squares.value.flat())
function checkForWinner (value) {
console.log('check4Winner: ' value)
// NOTE: in this version we have a
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8], // horizontal wins
[0, 3, 6],
[1, 4, 7],
[2, 5, 8], // vertical wins
[0, 4, 8],
[2, 4, 6] // cross wins
]
for (let i = 0; i < lines.length; i ) {
const [a, b, c] = lines[i]
if (
value[a] &&
value[a] === value[b] &&
value[a] === value[c]
) {
console.log('value[a]: ' value[a])
return value[a]
}
}
return null
}
function checkForTieGame () {
// make it a boolean
// let isTie = true
// check each space on the board
squares.value.forEach((s) => {
// if a space is available
// if (s === null) isTie = false
})
// if tie is true, end the game
// if (isTie === true) gameOver.value = true
}
function takeTurn (n) {
console.log('takeTurn value: ' n)
if (winner.value) return
squares.value[n] = turn.value
checkForTieGame()
turn.value = turn.value === 'X' ? 'O' : 'X'
console.log('player: ' turn.value)
}
function reset () {
turn.value = 'O'
console.log(squares.value.length)
squares.value = squares.value.map((square) => '')
// for (let i = 0; i <= 8; i ) squares.value.push('') // make a blank board
}
return { squares, turn, winner, checkForWinner, takeTurn, reset }
}
}
</script>
<style scoped>
button{
margin-top: 40px;
}
#board {
border: 1px solid darkred;
height: 400px;
width: 400px;
margin:0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.square {
background: #fff;
border: 1px solid #999;
/*float: left;*/
font-size: 70px;
font-weight: bold;
line-height: 34px;
height: 100px;
width: 100px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
}
</style>
感謝您的時間
uj5u.com熱心網友回復：
將 v-for 回圈中的鍵設定為 unique(index) ，因此替換:key="square"為:key="index"
const { ref, computed } = Vue
const app = Vue.createApp({
props: {
msg: String // Vue has prop typechecking by default
},
setup () {
const turn = ref('X') // player first turn
const squares = ref([])
for (let i = 0; i <= 8; i ) squares.value.push('') // make a blank board}
console.log('squares value: ' squares.value)
const winner = computed(() => checkForWinner(squares.value.flat())) // check 4 winner everytime board changes
console.log('computed:' squares.value.flat())
function checkForWinner (value) {
console.log('check4Winner: ' value)
// NOTE: in this version we have a
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8], // horizontal wins
[0, 3, 6],
[1, 4, 7],
[2, 5, 8], // vertical wins
[0, 4, 8],
[2, 4, 6] // cross wins
]
for (let i = 0; i < lines.length; i ) {
const [a, b, c] = lines[i]
if (
value[a] &&
value[a] === value[b] &&
value[a] === value[c]
) {
console.log('value[a]: ' value[a])
return value[a]
}
}
return null
}
function checkForTieGame () {
// make it a boolean
// let isTie = true
// check each space on the board
squares.value.forEach((s) => {
// if a space is available
// if (s === null) isTie = false
})
// if tie is true, end the game
// if (isTie === true) gameOver.value = true
}
function takeTurn (n) {
console.log('takeTurn value: ' n)
if (winner.value) return
squares.value[n] = turn.value
checkForTieGame()
turn.value = turn.value === 'X' ? 'O' : 'X'
console.log('player: ' turn.value)
}
function reset () {
turn.value = 'O'
squares.value = Array(9).fill('');
}
return { squares, turn, winner, checkForWinner, takeTurn, reset }
}
})
app.mount('#demo')button{
margin-top: 40px;
}
#board {
border: 1px solid darkred;
height: 200px;
width: 200px;
margin:0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.square {
background: #fff;
border: 1px solid #999;
/*float: left;*/
font-size: 70px;
font-weight: bold;
line-height: 34px;
height: 50px;
width: 50px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
}<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
<h2>{{ msg }}</h2>
<h2 v-if="winner" >Winner: {{ winner }}</h2>
<h2 v-else>Player Move: {{ turn }}</h2>
<div id="board">
<!-- ?? index is unique -->
<div class="square" v-for="(square, index) in squares" :key="index" @click="takeTurn(index)">
{{ square }}
</div>
</div>
<button @click="reset">
Reset
</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/435395.html
上一篇：抗鋸齒圓在opencv中呈鋸齒狀