<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>
import { reactive, ref } from 'vue'
export default {
setup () {
const number = ref(null)
const dices = reactive([
{
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'
}
])
function generateNumber (diceNumber) {
const max = Number(diceNumber)
const min = +1
const randomNumber = Math.floor(Math.random() * (max - min + 1) + min)
this.number = randomNumber
}
return {
number,
dices,
generateNumber
}
}
}
</script>
<style scoped>
img {
width: 40px;
height: 40px;
}
</style><template>
<div id="rtb-5-1"></div>
</template>
<script>
import { onMounted } from 'vue'
export default {
setup () {
onMounted(() => {
(function (w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-12345-1",
renderTo: "rtb-5-1",
pageNumber: 1
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "http://an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
})
}
}
</script>