在Vue.js上單擊切換按鈕顏色

Question

我正在使用Vue.js進行gomoku風格的遊戲，並且卡住了。當其中一個按鈕被點擊時，它應該將該按鈕的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是真的。 您還應該檢查該數組中與該按鈕相對應的點是否已標記爲已選中。

編輯：

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不isBluenull？ 因爲當你點擊按鈕2變量變化 - turn和board。 不幸的是，當談到觀察數組中的變化時，vue並不是很好（push等都可以）。所以它不會使用類綁定觸發任何反應性魔術......除非我們還在這些函數之一中使用turn變量。這些方法vue知道，當變量turn更改（每次點擊）時，它也應該重新驗證類綁定。

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