Цвет кнопки переключения при нажатии в Vue.js

Question

Я работаю над игрой в стиле gomoku, используя Vue.js, и я застрял. Когда одна из кнопок нажата, она должна изменить background-color этой кнопки на зеленый, затем, если я нажму на другое открытое место, она должна изменить background-color на синий (тем самым имитируя ход каждого игрока). Проблема с моей программой пока заключается в том, что когда я нажимаю кнопку, она меняет каждое пустое место на зеленый, а не только на тот, который я нажал. Я пытаюсь сделать это в моем index.html:

<ul> 
    <li v-for="slots in board"> 
    <ul id="board"> 
    <li v-for="slot in slots"> 
     <button @click="handleClick($index, $parent.$index)" 
     :class="{'green': turn}" 
     >{{slot}}</button></li> 
    </ul> 
</li> 
</ul> 

Тогда в моем styles.css:

.green{ 
    background-color: #41B883; 
} 
.blue{ 
    background-color: #35495E; 
} 

Answer 1

в:

<button @click="handleClick($index, $parent.$index)" 
     :class="{'green': turn}" 
     >{{slot}}</button> 

вы связывании зеленый класс для каждой кнопки только потому, что turn является правда . Вы также должны проверить, отмечена ли отметка в этом массиве, соответствующая этой кнопке.

EDIT:

HTML:

<button @click="handleClick($index, $parent.$index)" 
    v-bind:class="{ 'green': isGreen($index, $parent.$index), 'blue': isBlue($index, $parent.$index)}"> 
      {{slot}} 
</button> 

использовать 2 функции для проверки, какой класс для привязки.

в JS:

handleClick: function(index, parent){ 
     this.turn = !this.turn; 
     this.turn ? this.board[parent][index] = greenDisk : this.board[parent][index]= blueDisk; 
    }, 
isGreen: function(index,parent){ 
return (this.board[parent][index] == greenDisk); 
}, 
isBlue: function(idx1,idx2){ 
return !(this.turn == null) && (this.board[idx2][idx1] == blueDisk); 
} 

Почему я проверить this.turn не null в isBlue? Потому что когда вы нажимаете кнопку 2 переменные изменяются - turn и board. К сожалению, vue не очень хорошо подходит для наблюдения за изменениями в массивах (push и т. Д.). Поэтому он не будет запускать любую магию реактивности с привязками классов ... если мы не будем использовать переменную turn в одной из этих функций. Этим способом vue знает, что когда переменная turn изменяется (каждый клик), она также должна проверять привязки классов.

codepen: http://codepen.io/lukpep/pen/KMgaNP