JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script>
<div id="app">
  <h4>Or you could make a custom component to handle the logic</h4>
  <form>
    <radio-order group="rad" amount="10" type="small"></radio-order>
    <radio-order group="rad" amount="15" type="med"></radio-order>
    <radio-order group="rad" amount="20" type="large"></radio-order>
  </form>
    
  <pre>{{ $data | json }}</pre>
  
  <template id="radio-order">
    <div>
      <input type="radio" :name="group" @click="setOrder">${{ amount }}
    </div>
  </template>
</div>

JavaScript

Vue.component('radio-order', {
  template: '#radio-order',
  
  props: ['group', 'amount', 'type'],
  
  methods: {
    'setOrder': function() {
      this.$dispatch('set-order', {
        amount: this.amount,
        type: this.type
      })
    }
  }
});

var app = new Vue({
  el: '#app',

  data: {
    order: {},
  },
  
  events: {
  	'set-order': function(order) {
    	this.order = order;
    }
  }
});