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

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' }
      ],

行動規範の内容に同意します

回答2件

ベストアンサー

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

vue
1<template>
2  <div id="app">
3    <radio
4      :items="items"
5      :value="item"
6      @input="input"
7      >
8    </radio>
9  </div>
10</template>
11
12<style scoped>
13</style>
14
15<script>
16import Radio from './components/Radio.vue';
17
18export default {
19  components: {
20    Radio,
21  },
22  data: function() {
23    return({
24      item: '',
25      items: [
26        { caption: 'あいう', value: 'aiu' },
27        { caption: 'かきく', value: 'kakiku' },
28      ]
29    });
30  },
31  methods: {
32    input: function(val) {
33      console.log(val.caption + " : " + val.value);
34    }
35  }
36}
37</script>

Radio.vue

vue
1<template>
2  <div>
3    <div
4      v-for="(data, idx) in items"
5      :key="idx"
6      >
7      <input
8        type="radio"
9        :id="idx"
10        :value="data.value"
11        v-model="item"
12        :class="{ active: isItemActive(data) }"
13        @click="onItemClicked(data)"
14        >
15        <label :for="idx">{{ data.caption }} {{ data.value }}</label>
16      <br>
17    </div>
18  </div>
19</template>
20
21<style lang="scss" scoped>
22</style>
23
24<script>
25export default {
26  props: {
27    items: {
28      type: Array,
29      required: true,
30      default: () => []
31    },
32    value: {
33      type: String,
34      required: true,
35      default: () => ''
36    }
37  },
38  data: function() {
39    return({item: this.value});
40  },
41  methods: {
42    isItemActive(item) {
43      return this.value === item
44    },
45    onItemClicked(item) {
46      this.$emit('input', item)
47    }
48  }
49}
50</script>

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

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

投稿2020/06/18 02:39

rururu3

総合スコア5545

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

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