<template> <div> <div> {{ turn }} </div> <table> <tr v-for="(line, lineId) in table" :key="lineId"> <td v-for="(item, itemId) in line" :key="itemId"> <OXCell :player="item" :row="lineId" :col="itemId" @cell-click="cellClick" /> </td> </tr> </table> </div> </template> <script> import OXCell from './OXCell.vue' export default { data () { return { finish: false, winner: '-', turn: 'O', table: [ ['-', '-', '-'], ['-', '-', '-'], ['-', '-', '-'] ] } }, methods: { cellClick (row, col) { console.log('Cell click ' + row + ' ' + col) this.table[row][col] = this.turn if (this.checkwin(row, col)) { console.log('Win') this.finish = true this.winner = this.turn return } this.switchTurn() }, switchTurn () { if (this.turn === 'O') { this.turn = 'X' return } this.turn = 'O' }, randomPlayer () { if (Math.floor(100 * Math.random()) % 2 === 0) { this.turn = 'O' } else { this.turn = 'X' } }, checkwin (row, col) { if ( this.checkRow(row) || this.checkCol(col) || this.checkX1() || this.checkX2() ) { return this.turn } }, checkRow (row) { return false }, checkCol (col) { return false }, checkX1 () { return false }, checkX2 () { return false } }, components: { OXCell }, mounted () { this.randomPlayer() } } </script> <style></style>