Vue.jsドロップダウンのリストをラジオボタンに変更したい

Question

SelectInput.vue

<template>
  <div class="select__wrapper">
    <select class="select__select" :value="value">
      <option value="" disabled selected>
        選択してください
      </option>
      <option v-for="item in items" :key="item.caption" :value="item.value">
        {{ item.caption }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: String,
      required: true,
      default: () => ''
    }
  },
  methods: {
    isItemActive(item) {
      return item === this.value
    }
  }
}
</script>

このコードをラジオボタンに変えたいです
その際には、こう言った形で配列にしてデータを渡したい

      item: '',
      items: [
        { caption: 'hogehoge', value: 'hogevalue' },
        { caption: 'fugafuga', value: 'fugavalue' }
      ],

Answer 1

同じような質問が２個あるのでこちらで

<template>
  <div id="app">
    <radio
      :items="items"
      :value="item"
      @input="input"
      >
    </radio>
  </div>
</template>

<style scoped>
</style>

<script>
import Radio from './components/Radio.vue';

export default {
  components: {
    Radio,
  },
  data: function() {
    return({
      item: '',
      items: [
        { caption: 'あいう', value: 'aiu' },
        { caption: 'かきく', value: 'kakiku' },
      ]
    });
  },
  methods: {
    input: function(val) {
      console.log(val.caption + " : " + val.value);
    }
  }
}
</script>

Radio.vue

<template>
  <div>
    <div
      v-for="(data, idx) in items"
      :key="idx"
      >
      <input
        type="radio"
        :id="idx"
        :value="data.value"
        v-model="item"
        :class="{ active: isItemActive(data) }"
        @click="onItemClicked(data)"
        >
        <label :for="idx">{{ data.caption }} {{ data.value }}</label>
      <br>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: String,
      required: true,
      default: () => ''
    }
  },
  data: function() {
    return({item: this.value});
  },
  methods: {
    isItemActive(item) {
      return this.value === item
    },
    onItemClicked(item) {
      this.$emit('input', item)
    }
  }
}
</script>

こんな感じじゃないかな。

※isItemActiveに関しては用途がわからなかったのでとりあえずおいておいた感じ

Answer 2

とりあえずこれで並ぶんじゃない？イベントは流れでオナシャス

  <div class="select__wrapper">
    <label v-for="item in items" :key="item.caption" style="display:block;">
      <input type="radio" :value="item.value" v-model="value">{{ item.caption }}
    </label>
    {{value}}
  </div>