一个非常令人困惑的错误正在潜入我的 vue 组件中;如果我从下面的代码中添加第 5 行,它会按预期工作,如果我删除它,每个 board-slot
元素的 click 方法将停止更改 boardSlots
对象。
使用 {{currentPlayer}}
与此有什么关系?我没有在其他地方使用它。它不一定需要打印,只需要位于模板定义中的某个位置,因此具有 currentPlayer
类绑定(bind)的随机元素也奇迹般地使其工作。 Vuex 的架构有什么我遗漏的吗?
<template>
<div id="board-container">
//THIS LINE
{{currentPlayer}}
<div id="board">
<div class="board-row" v-for="i in boardSlots">
<div class="board-slot"
v-for="boardSlot in i"
:class="[{checked: (boardSlot.owner != 0)}, 'ownedBy-player-' + boardSlot.owner]"
@click="checkSlot(boardSlot.row, boardSlot.col)">
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default{
created(){
for(var i = 0; i < 6; i++){
this.boardSlots[i] = [];
}
var row = 0;
var col = 0;
for(var i = 1; i <= 42; i++){
this.boardSlots[row].push({
owner: 0,
hover: false,
row: row,
col: col,
});
col++;
if (col == 7) {
col = 0;
if (row < 5) {
row++;
}
}
}
},
data(){
return {
boardSlots: [],
}
},
computed: {
...mapState([
'currentPlayer',
]),
},
methods: {
...mapActions([
'swapToNextPlayer',
]),
checkSlot(row, col){
if (this.boardSlots[row][col].owner == 0) {
this.boardSlots[row][col].owner = 1;
this.swapToNextPlayer();
}
}
}
}
</script>
最佳答案
我不确定 {{currentPlayer}}
具体与它有什么关系,但是任何时候你修改组件的状态并且 View 没有更新,那么(假设没有渲染期间出错)通常意味着:
- 您正在以 Vue 无法观察到的方式改变状态。
- 您的状态不是 react 性的,这可能是由于上一点而发生的。
这是一个危险信号:
this.boardSlots[i] = [];
Vue 无法检测对这样的数组元素的赋值(请阅读 Array Change Detection )。您需要使用 splice()
或 push()
让 Vue 知道它。或者,您也可以在局部变量中构造 boardSlots
数组,然后将其分配给最后的 this.boardSlots
:
const boardSlots = [];
// Initialize boardSlots ...
this.boardSlots = boardSlots;
此外,您还以一种奇怪的方式渲染行和槽;您不应该在渲染期间改变任何状态,无论是本地状态还是其他状态(--i
)。只需这样做:
<div class="board-row" v-for="slots of boardSlots">
<div class="board-slot"
v-for="slot of slots"
:class="[{checked: (slot.owner != 0)}, 'ownedBy-player-' + slot.owner]"
@click="checkSlot(slot.row, slot.col)">
</div>
</div>
但这可能与您的 react 性问题没有任何关系。
关于javascript - 如果不在模板中使用特定的 vuex 状态,单击处理程序将无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57719071/