tic-tac-toe.js

var app = new Vue({
  el: '#vue-app',
  data: {
    turn: 'x', 
    board: [
      [null, null, null],
      [null, null, null],
      [null, null, null]
    ]
  }, 
  methods: {
    changeIt: function(row,column){

      this.board[row][column] = this.turn

      let winner = "Player" + this.turn + " you are a winner!";
      

      if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn){
        document.getElementById("1").style.backgroundcolor = "green";
        document.getElementById("2").style.backgroundcolor = "green";
        document.getElementById("3").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);
      
      }else if (this.board[0,0] == this.turn && this.board[1,0] == this.turn && this.board[2,0] == this.turn){
        document.getElementById("1").style.backgroundcolor = "green";
        document.getElementById("4").style.backgroundcolor = "green";
        document.getElementById("7").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);    

      }else if (this.board[1,0] == this.turn && this.board[1,1] == this.turn && this.board[1,2] == this.turn) {
        document.getElementById("4").style.backgroundcolor = "green";
        document.getElementById("5").style.backgroundcolor = "green";
        document.getElementById("6").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);  

      }else if (this.board[2,0] == this.turn && this.board[2,1] == this.turn && this.board[2,2] == this.turn) {
        document.getElementById("7").style.backgroundcolor = "green";
        document.getElementById("8").style.backgroundcolor = "green";
        document.getElementById("9").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);  

      }else if (this.board[0,1] == this.turn && this.board[1,1] == this.turn && this.board[2,1] == this.turn) {
        document.getElementById("2").style.backgroundcolor = "green";
        document.getElementById("5").style.backgroundcolor = "green";
        document.getElementById("8").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);   

      }else if (this.board[0,2] == this.turn && this.board[1,2] == this.turn && this.board[2,2] == this.turn) {
        document.getElementById("3").style.backgroundcolor = "green";
        document.getElementById("6").style.backgroundcolor = "green";
        document.getElementById("9").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);    

      }else if (this.board[0,0] == this.turn && this.board[1,1] == this.turn && this.board[2,2] == this.turn) {
        document.getElementById("1").style.backgroundcolor = "green";
        document.getElementById("5").style.backgroundcolor = "green";
        document.getElementById("9").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);  

      }else if (this.board [2,0] == this.turn && this.board [1,1] == this.turn && this.board [0,2] == this.turn){
        document.getElementById("3").style.backgroundcolor = "green";
        document.getElementById("5").style.backgroundcolor = "green";
        document.getElementById("6").style.backgroundcolor = "green";
        alert(winner);
        setTimeout(function(){
          if(!alert('Play Again?')){window.location.reload();}
        }, 0500);  
      }
    
      this.turn = (this.turn == 'x') ? 'o' : 'x';
    }
  }
});