Recently, I've been developing a dice roller using Vue for a game project. The approach involves looping through different types of dice with v-for to create buttons and display the result in an associated div element. However, despite correct console logs, there seems to be an issue with updating the rollResult where it should be interpolated. For brevity, only the essential code has been shared here. If more details are needed, please don't hesitate to ask. Thank you in advance!
HTML:
<v-list-tile v-for="die in dice" :key="die.name">
...
<template v-slot:activator="{ on }">
<v-btn class="primary" @click="rollDice(die.sides)">Roll</v-btn>
<div>{{rollResult}}</div>
</template>
...
</v-list-tile>
Data:
rollResult: 0,
dice: [
{ sides: 4 },
{ sides: 6 },
{ sides: 8 },
{ sides: 10 },
{ sides: 12 },
{ sides: 20 }
],
Function:
rollDice: function(n) {
let rollResult = Math.ceil(Math.random() * n);
console.log(rollResult);
}