fkingRadios.vue

<template>
  <div class="zv-radio">
    <label :for="id">
      <input :id="id"
             v-model="pickedData"
             type="radio"
             :value="value"
             :name="value"
             :disabled="disabled">
      <span>{{ label }}</span>
    </label>
    {{ picked }} - {{ value }} -- lol
    <ValidationMessages v-if="validations"
                        :validations="validations"
                        class="validation-msg" />
  </div>
</template>

<script>
import './radio.scss'
import ValidationMessages from '../Messages/ValidationInput'

export default {
  name: 'ZvRadio',
  components: {
    ValidationMessages,
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    value: {
      type: [String, Number, Boolean, Object],
      default: null,
    },
    picked: {
      type: [String, Number, Boolean, Object],
      required: false,
      default: null,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    validations: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  data () {
    return {
      pickedData: this.picked,
    }
  },
}

/*
props looks like this inside v-for
radios: [
    {
      id: 'radio id',
      name: 'radio name',
      label: 'radio label',
      value: 'radio value',
      picked: 'second radio value',
    },
    {
      id: 'second radio id',
      name: 'second radio name',
      label: 'second radio label',
      value: 'second radio value',
      picked: 'second radio value',
    },
    {
      id: 'third radio id',
      name: 'third radio name',
      label: 'third radio label',
      value: 'third radio value',
      picked: 'second radio value',
    },
  ],
</script>