javascript - 在 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>

你将 green 类绑定(bind)到每个按钮只是因为 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 个函数来检查要绑定(bind)的类。

在 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 在观察数组的变化时不是很好(推送等都可以)。所以它不会触发类绑定(bind)的任何反应性魔法......除非我们还在其中一个函数中使用 turn 变量。通过这种方式，vue 知道当变量 turn 发生变化时(每次点击)它也应该重新验证类绑定(bind)。

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