All Finish

src/components/OXCell.vue

 <template>
   <div
     @click="clickCell"
-    :class="{ cell: true, cellX: player === 'X', cellO: player === 'O' }"
+    :class="{ cell: true, cellX: player === 'X', cellO: player === 'O', grade: grade }"
   >
     {{ player }}
   </div>
 </template>
 <script>
 export default {
-  props: ['player', 'row', 'col'],
+  props: ['player', 'row', 'col', 'grade'],
   methods: {
     clickCell (event) {
       // console.log(event)
@@ -29,4 +29,7 @@ export default {
 .cellO {
   color: red;
 }
+.grade {
+  background-color: yellow;
+}
 </style>

src/components/OXTable.vue

@@ -3,10 +3,11 @@
     <div v-if="finish">
       <!-- <span v-if="winner !== '-'">{{ winner }} Win!!! </span>
       <span v-else>Draw!!! </span> -->
-      <span>{{ result }}</span>
+      <span>{{ result }}&nbsp;</span>
       <button @click="newGame">New Game</button>
     </div>
     <div v-else>{{ turn }} Turn..</div>
+    <br>
     <table>
       <tr v-for="(line, lineId) in table" :key="lineId">
         <td v-for="(item, itemId) in line" :key="itemId">
@@ -14,6 +15,7 @@
             :player="item"
             :row="lineId"
             :col="itemId"
+            :grade="gradeTable[lineId][itemId]"
             @cell-click="cellClick"
           />
         </td>
@@ -34,6 +36,11 @@ export default {
         ['-', '-', '-'],
         ['-', '-', '-'],
         ['-', '-', '-']
+      ],
+      gradeTable: [
+        [false, false, false],
+        [false, false, false],
+        [false, false, false]
       ]
     }
   },
@@ -60,6 +67,11 @@ export default {
           this.table[row][col] = '-'
         }
       }
+      for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 3; col++) {
+          this.gradeTable[row][col] = false
+        }
+      }
     },
     cellClick (row, col) {
       if (this.finish) return
@@ -108,6 +120,9 @@ export default {
           return false
         }
       }
+      for (let col = 0; col < 3; col++) {
+        this.gradeTable[row][col] = true
+      }
       return true
     },
     checkCol (col) {
@@ -116,6 +131,9 @@ export default {
           return false
         }
       }
+      for (let row = 0; row < 3; row++) {
+        this.gradeTable[row][col] = true
+      }
       return true
     },
     checkX1 () {
@@ -124,6 +142,9 @@ export default {
           return false
         }
       }
+      for (let index = 0; index < 3; index++) {
+        this.gradeTable[index][index] = true
+      }
       return true
     },
     checkX2 () {
@@ -132,6 +153,9 @@ export default {
           return false
         }
       }
+      for (let index = 0; index < 3; index++) {
+        this.gradeTable[index][2 - index] = true
+      }
       return true
     }
   },