Vue 2 Custom Input Component Skeletons

radiobutton.md

Radio Button

<template>
  <label
    :class="isChecked ? 'bg-red' : 'bg-green'"
  >
    <input
      type="radio"
      v-bind="$attrs"
      :value="value"
      :checked="isChecked"
      @change="$emit('change', $event.target.value)"
    >
      {{ label }}
    </label>
  </label>
</template>
<script>
export default {
  inheritAttrs: false,
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  },
  computed: {
    isChecked () {
      return this.value === this.checked
    }
  }
}
</script>