Toggle Boolean 就像切换类列表 Vue 2

Question

这是我的数据：

diceRoll: [{value: null, locked: false,},{value: null, locked: false},{value: null, locked: false}, 
{value: null, locked: false},{value: null, locked: false}],

并希望在每次单击元素（骰子）时切换为锁定：真或假。

<button class="dice textHover" v-for="(roll, index) in diceRoll" v-html="cssDice[roll.value]"   
@click="roll.locked = true, $event.target.classList.toggle('active')" :key="index"></button>

我可以切换我数据中的锁定布尔值与 classList 相同吗？

我尝试了：$event.target.object.toggle('locked') 和一些类似的方法。但它不起作用，而且它会是两个 @click 事件，所以我可能会以错误的格式输出它。

Answer 1

与其在 @click 中执行逻辑，不如在 method 中执行。

在您的 methods 中添加如下新方法：

methods: {
  diceButtonClick(index, $event) {
    this.diceRoll[index].locked = true;
    $event.target.classList.toggle('active');
  }
}

那么你的按钮就是：

<button 
   class="dice textHover" 
   v-for="(roll, index) in diceRoll" 
   v-html="cssDice[roll.value]"   
   @click="diceButtonClick(index, $event)" // This is the change
   :key="index">
</button>

Answer 2

你的问题不是很清楚，但如果我理解正确你可以使用条件 class:

:class=“{active: roll.locked}”

您可以在 vue docs

中阅读更多相关信息

Toggle Boolean 就像切换类列表 Vue 2

Toggle Boolean like toggling classlist Vue 2

boolean

toggle

vue.js

vuejs2