Vue colors matrix

by alpac

HTML

<div id="app">
  <div v-for="row,i in matrix" class="container">
     <div v-for="column,j  in row" 
       v-on:click="changeColors(i,j)"
       class="el" 
       :style="{'background-color': column}">
       
     </div>
  </div>
</div>

CSS

.container{
  max-width: calc(41px * 6);
}

.el{
  height: 40px;
  width:40px;
  border:solid 1px;
  float:left;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    matrix: [
    	['white','white','white','white','white'],
      ['white','white','white','white','white'],
      ['white','white','white','white','white'],
      ['white','white','white','white','white'],
      ['white','white','white','white','white'],
    ]
  },
  methods: {
  	getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
  	changeColors(row,column){
    	let new_color = this.getRandomColor();
    	
      console.log(this.matrix[row][column])
      
      if(row - 1 >= 0){
      	Vue.set(this.matrix[row - 1],column, new_color);
      }
    	if(row + 1 <= 4){
      	Vue.set(this.matrix[row + 1],column, new_color);
      }
      if(column - 1 >= 0){
      	Vue.set(this.matrix[row],column - 1, new_color);
      }
      if(column + 1 <= 4){
      	Vue.set(this.matrix[row],column + 1, new_color);
      }
      
    }
  }
})