Swert

<template>
  <div class="home">
    <div class="container">
      <div class="row">
          <div class="col-md-4" v-for="dice in dices" :key="dice.diceId">
            <div class="card mb-4 box-shadow">
              <img :src="dice.diceImage" class="card-img-top" @click="generateNumber(dice.diceNumber)">
            </div>
          </div>
      </div>
    </div>
    <div>Random Number: <strong style="color:red">{{ number }}</strong></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      number: null,
      dices: [
        {
          diceId: 1,
          diceNumber: 20,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-twenty-faces-twenty.svg'
        },
        {
          diceId: 2,
          diceNumber: 12,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d12.svg'
        },
        {
          diceId: 3,
          diceNumber: 10,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d10.svg'
        },
        {
          diceId: 4,
          diceNumber: 8,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/dice-eight-faces-eight.svg'
        },
        {
          diceId: 5,
          diceNumber: 6,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/delapouite/perspective-dice-six.svg'
        },
        {
          diceId: 6,
          diceNumber: 4,
          diceImage: 'https://game-icons.net/icons/ffffff/000000/1x1/skoll/d4.svg'
        }
      ]
    }
  },
  methods: {
    generateNumber (diceNumber) {
      const max = Number(diceNumber)
      const min = +1
      const randomNumber = Math.floor(Math.random() * (max - min + 1) + min)
      this.number = randomNumber
    }
  }
}
</script>

<style scoped>
  img {
    width: 40px;
    height: 40px;
  }
</style>