时间戳

首页 > 解决方案 > 如何在 VUE2 中选择多个（骰子）按钮

javascript - 如何在 VUE2 中选择多个（骰子）按钮

问题描述

我有骰子按钮：

<template >
<div>
        <div class="fiveDice"  >
                <button v-model="diceroll" class="dice textHover" v-for="(dicecode, index) in diceroll" v-html="css[dicecode]"   @click="holdDice($event)"></button>
                           
        </div>

        <div class="button">
            <button id="btn" class="btn wHover" @click="roleNumber();">Gooien</button>
            <button id="btnFill" class="btn wHover">Vul score in</button>
        </div>
        </div>
        
</div>

当您单击带有 @click="RoleNumber()" 的按钮时，它将输出带有骰子 uni 代码的按钮，它将显示 5 个骰子。

我希望可以选择多个骰子，以便您可以握住它们，其余未选择的骰子将被抛出。（它的 Yahtzee 游戏）

所以我使用事件选项来定位它们：

 holdDice: function(event) {
            console.log(event);
                    

}

但是 console.log(event) 输出 ALOT ，当我在控制台中读取输出并看到 inner.html 它确实针对特定的骰子。

我的猜测是函数中的一个循环，但如何正确定位它们。Event.value 不起作用。event.target.value 也不起作用。它将显示未定义。

我如何制作它以便我可以选择多个？我想循环通过它。我对 VUE 完全陌生，我现在正在学习 VUE2。任何人都可以指导我正确的方向吗？

标签： javascriptvue.jsbuttonvuejs2

解决方案

好吧，我会在我的数据中制作一个骰子数组，并让每个按钮自己切换

boolean:
diceHeld : {
 die1 : false,
  die2 : false,
die3 : false,
die4 : false,
die5 : false
}

然后你的“保持”按钮你只需直接用一些东西来处理骰子

@click="diceHeld.die1 = !diceHeld.die1"

您可以使用相同的对象来确定按钮是否应该看起来“已选中”，并且您可以在滚动时查看此对象以查看需要重新滚动的骰子。

编辑 1：请注意，这不是您正在寻找的完整解决方案，但它可以工作并且应该为您指明工作方向。

你可以像这样制作 HTML

<div>
    <div class="die" v-for="diceNumber in numberOfDice" :style="{'background-color' : selectedDiceObject['dice' + diceNumber] ? 'red' : 'green'}" @click="toggleDice(diceNumber)">{{diceNumber}}</div>
</div>

和这样的JS部分：

{
  el: '#vueApp',
  data: function () {
    return {
      numberOfDice: 5,
      selectedDiceObject: { dice1: false, dice2: false, dice3: false, dice4: false, dice5: false  }
    };
  },
  methods: {
    toggleDice: function (diceNum) {
      this.selectedDiceObject['dice' + diceNum] = !this.selectedDiceObject['dice' + diceNum];
    }
  },
};

请注意，骰子按钮的背景颜色设置为反映其状态

Edit2：现在血液已经开始从我的胃流回我的大脑，我想我会以稍微不同的方式解决它：

网页：

<div v-if="selectedDiceObject">
    <div class="die" v-for="dob in selectedDiceObject" :style="{'background-color' : dob.selected ? 'red' : 'green'}" @click="dob.selected = !dob.selected">{{dob.result}}</div>
</div>
<button @click="roll">roll</button>

JS：

{
  el: '#vueApp',
  data: function () {
    return {
      numberOfDice: 5,
      selectedDiceObject: null
    };
  },
  methods: {
    roll: function () {
      for(dicekey in this.selectedDiceObject) {
        if (!this.selectedDiceObject[dicekey].selected)
        this.selectedDiceObject[dicekey].result = Math.round( (Math.random() * 5) + 1);
      }
    }
  },
  mounted: function () {
    let workObj = {};
    for (let i = 1; i <= this.numberOfDice; i++) {
      workObj['dice' + i] = { selected : false, result : 0 };
    }
    this.selectedDiceObject = workObj;
  }

};

注意这里，我使用 dice 对象来保存当前掷骰和是否被选中。这样，我可以使用相同的 for 来控制每个骰子的所有方面，而无需更多代码。

其中一项新功能是我在挂载事件中初始化了骰子。我也可以从这里的服务器获取数据，但现在它完全是动态的。只需设置另一个 numberOfDice 和 viola.. 您现在可以使用该数量的骰子。

推荐阅读