kz’s blog

興味のあることについて書いていきます。

Vue.js でラジオボタンのコンポーネントを作成する

ラジオボタンのコンポーネント

テンプレート

<template>
  <label>
    <input
      type="radio"
      :value="value"
      :checked="value === checkedValue"
      @change="$emit('change', $event.target.value)"
    />
    <span v-if="label">{{ label }}</span>
    <span v-else>{{ value }}</span>
  </label>
</template>

スクリプト

<script>
export default {
  name: 'RadioButton',
  model: {
    prop: 'checkedValue',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      required: true
    },
    label: {
      type: String
    },
    checkedValue: {
      type: String,
      required: true
    }
  }
}
</script>

valuecheckedValueが一致している場合にチェックが付きます。

クリックして選択した内容が変更されると@changeが発動して、valueの値でcheckedValueを更新する仕組みです。

ラジオボタンを設置する際は、value, label, v-model属性が必要となり、v-modelは常にcheckedValueの値になるようにしています。

v-modelを使ったコンポーネントのカスタマイズについては、以下を参照して下さい。 jp.vuejs.org

ラジオボタン設置側

テンプレート

<template>
  <div>
    <div>
      <h2>個別に設置</h2>
      <RadioButton value="a" label="ラジオA" v-model="radio1"/>
      <RadioButton value="b" label="ラジオB" v-model="radio1"/>
      <div>選択値: {{ radio1 }}</div>
    </div>
    <hr/>
    <div>
      <h2>配列で設置</h2>
      <RadioButton
        v-for="(radioButtonItem, index) in radioButtonItems"
        :key="index"
        v-bind="radioButtonItem"
        v-model="radio2"
      />
      <div>選択値: {{ radio2 }}</div>
    </div>
  </div>
</template>

スクリプト

<script>
import RadioButton from '@/components/RadioButton.vue'

export default {
  components: {
    RadioButton
  },
  data () {
    return {
      radio1: 'a',
      radio2: '1',
      radioButtonItems: [
        { value: '1', label: 'ラジオ1' },
        { value: '2', label: 'ラジオ2' },
        { value: '3', label: 'ラジオ3' },
      ]
    }
  }
}
</script>

2パターンの設置を方法を記載しています。

個別に設置

ラジオボタンの個数分だけタグを設置します。

この時、v-modelは同じ値にして下さい。

配列で設置

ラジオボタンを構成するvalue, labelをオブジェクトにひとまとめし、さらに配列にし、v-forで繰り返し設置しています。

こちらの良い点は、ラジオボタンの個数を動的に変えることができるので、DB からの取得結果でラジオボタンを設置する場合に役立つかと思います。

オブジェクトのプロパティの受け渡しについては以下を参照して下さい。 jp.vuejs.org

画面表示

仕上がりはこんな感じです。

f:id:kz62:20181018210131p:plain:w400