Radio

<template>
<article>
  <section>
    <veui-radio :checked.sync="normal">
      Normal size
    </veui-radio>
    <veui-radio
      :checked.sync="small"
      ui="small"
    >
      Small size
    </veui-radio>
  </section>
  <section>
    <veui-button
      ui="small"
      @click="reset"
    >
      Reset
    </veui-button>
  </section>
</article>
</template>

<script>
import { Radio, Button } from 'veui'

export default {
  components: {
    'veui-radio': Radio,
    'veui-button': Button
  },
  data () {
    return {
      normal: false,
      small: false
    }
  },
  methods: {
    reset () {
      this.normal = false
      this.small = false
    }
  }
}
</script>

<template>
<article>
  <veui-radio
    v-for="({ value, label }) in flavors"
    :key="value"
    v-model="flavor"
    :value="value"
  >
    {{ label }}
  </veui-radio>
  <p>Selected: {{ flavorLabelMap[flavor] || '-' }}</p>
</article>
</template>

<script>
import { Radio } from 'veui'

export default {
  components: {
    'veui-radio': Radio
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  },
  computed: {
    flavorLabelMap () {
      return this.flavors.reduce((map, { value, label }) => {
        map[value] = label
        return map
      }, {})
    }
  }
}
</script>