JSFiddle - React, Tailwind, and code Playground

by Pooya Parsa

HTML

<script type="text/x-template" id="dice-template">
<button @click="roll">Roll ({{value}})</button>  
</script>

<div id="app">
  <dice v-model="randNumber"></dice>
  <dice v-model="randNumber"></dice>

<br>
  <h3>
    Current value: {{randNumber}}
  </h3>
</div>

JavaScript

Vue.component('dice', {
  template: '#dice-template',
  props: ['value'],
  methods: {
  	roll() {
      this.$emit('input', ~~(Math.random() * 6) )
    }
  }
})


new Vue({
 el: '#app',
 data: {
   randNumber: '?'
 }
})