Estou tentando colocar em pratica o uso de eventos no Vue.js, e criei um prototipo de Tarot online em que sorteia cartas de um array. Minha dúvida é onde que se coloca a lógica, pois ao executar o evento clicando em um botão o console não mostra nenhuma resposta:
<template>
<div id="app">
<img src="./assets/tarotlogo.png" class="iconetarot">
<h1>{{ msg }}</h1>
<button @onclick="sorteiaCarta">Get a card</button>
<div class="cartasorteada"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Pick your card below',
cartasTarot: ["./assets/moon.jpg", "./assets/sun.jpg", "./assets/star.jpg"],
indiceCarta: 0
}
},
methods: {
sorteiaCarta: function(){
var indiceCarta = Math.floor(Math.random()*cartasTarot.length);
console.log("Carta sorteada foi" + cartasTarot[indiceCarta]);
/*identificar o motivo dos methods não estarem funcionando, mesmo sendo convocado no objeto do <template>*/
}
}
}
</script>Desde já grato.
