From df76700d2120c130595da329aa234323b6f297e0 Mon Sep 17 00:00:00 2001
From: 62160286 <62160286@go.buu.ac.th>
Date: Wed, 22 Dec 2021 22:13:13 +0700
Subject: [PATCH] Create OXCell
---
src/components/OXCell.vue | 16 +++++++++++++++
src/components/OXTable.vue | 41 ++++++++++++++++++++++++--------------
2 files changed, 42 insertions(+), 15 deletions(-)
create mode 100644 src/components/OXCell.vue
diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue
new file mode 100644
index 0000000..e229344
--- /dev/null
+++ b/src/components/OXCell.vue
@@ -0,0 +1,16 @@
+<template>
+ <div @click="clickCell">{{ player }}</div>
+</template>
+<script>
+export default {
+ props: ['player', 'row', 'col'],
+ methods: {
+ clickCell (event) {
+ console.log(event)
+ console.log('click ' + this.row + ' ' + this.col)
+ this.$emit('cell-click', this.row, this.col)
+ }
+ }
+}
+</script>
+<style></style>
diff --git a/src/components/OXTable.vue b/src/components/OXTable.vue
index 87c1ba5..4703a91 100644
--- a/src/components/OXTable.vue
+++ b/src/components/OXTable.vue
@@ -1,25 +1,36 @@
<template>
<div>
<table>
- <tr>
- <td>-</td>
- <td>-</td>
- <td>-</td>
- </tr>
- <tr>
- <td>-</td>
- <td>-</td>
- <td>-</td>
- </tr>
- <tr>
- <td>-</td>
- <td>-</td>
- <td>-</td>
+ <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>
-export default {}
+import OXCell from './OXCell.vue'
+export default {
+ data () {
+ return {
+ turn: 'O',
+ table: [
+ ['-', '-', '-'],
+ ['-', '-', '-'],
+ ['-', '-', '-']
+ ]
+ }
+ },
+ methods: {
+ cellClick (row, col) {
+ console.log('Cell click ' + row + ' ' + col)
+ this.table[row][col] = this.turn
+ }
+ },
+ components: {
+ OXCell
+ }
+}
</script>
<style></style>
--
GitLab