在 Vue.js 中单击时切换按钮颜色

Question

我正在使用 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 是 true 。 您还应该检查此数组中与该按钮对应的点是否标记为已选中。

编辑：

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);
}

为什么我在isBlue 中检查this.turn 不是null？ 因为当您单击按钮时，2 个变量会发生变化 - turn 和 board。 不幸的是，vue 在观察数组的变化时不是很好（推送等都可以）。所以它不会通过类绑定触发任何反应性魔法......除非我们还在其中一个函数中使用turn 变量。通过这种方式，vue 知道当变量 turn 更改（每次点击）时，它还应该重新验证类绑定。

代码笔： http://codepen.io/lukpep/pen/KMgaNP