Vue Radio Button Component

by Travis Almand

HTML

<div id="app">
  <div>
    <div>v-model</div>
    <radio-button label="one" value="one" v-model="radio1"></radio-button>
    <radio-button label="two" value="two" v-model="radio1"></radio-button>
    <radio-button label="three" value="three" v-model="radio1"></radio-button>
    <label>Chosen radio: <input :value="radio1" readonly /></label>
    
    <br /><br />
    
    <div>no v-model</div>
    <radio-button label="one" value="one" :model="radio2" @change="val => radio2 = val"></radio-button>
    <radio-button label="one" value="two" :model="radio2" @change="val => radio2 = val"></radio-button>
    <radio-button label="one" value="three" :model="radio2" @change="val => radio2 = val"></radio-button>
    <label>Chosen radio: <input :value="radio2" readonly /></label>
  </div>
</div>

CSS

label {
  display: block;
  margin: 10px;
}

Vue

Vue.component('radio-button', {
	props: ['label', 'value', 'model'],
  model: {
  	prop: 'model',
    event: 'change'
  },
  computed: {
  	checkedBool () {
    	return this.model === this.value;
    }
  },
  methods: {
  	updateInput () {
    	this.$emit('change', this.value);
    }
  },
	template: '<label><input type="radio" :value="value" :checked="checkedBool" @change="updateInput" /> {{ value }}</label>'
});

new Vue({
  el: "#app",
  data: {
    radio1: '',
    radio2: ''
  }
})