Vue.jsをクリックしたときにボタンの色を切り替える

Question

Vue.jsを使用してゴモクスタイルのゲームに取り掛かりました。ボタンの1つをクリックすると、そのボタンの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はisBlueでnullではありません確認してくださいなぜ？ ボタンをクリックすると2つの変数が変更されるので - turnとboardです。 残念ながら、vueは配列の変更を観察する場合（pushなどは大丈夫です）はあまり良くありません。したがって、これらの関数のいずれかに変数turnを使用しない限り、クラスバインディングとの反応性の魔法を発射しません。これらの方法では、変数turnが変更されると（クリックごとに）、クラスのバインディングも再検証する必要があることがわかります。

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