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>You could delegate the updating of both attributes to a click event</h4>
  <form>
    <input type="radio" name="rad" btn-amount="10" btn-type="small" @click="selectType($event)">$15 <br>
    <input type="radio" name="rad" btn-amount="15" btn-type="med" @click="selectType">$15<br>
    <input type="radio" name="rad" btn-amount="20" btn-type="large" @click="selectType">$20<br>
  </form>
    
  <pre>{{ $data | json }}</pre>
</div>

JavaScript

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

  data: {
    order: { 
      amount: '',
      type: '',
    }
  },

  methods: {
    selectType: function(e) {
      this.order.amount = $(e.currentTarget).attr('btn-amount');
      this.order.type = $(e.currentTarget).attr('btn-type');
    }
  }
});