【Vue】radioコンポーネントを作る

Vue2.6でradioコンポーネントを作る

公式ドキュメントではvueでradioをつくる場合はこうすると記載されている

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

https://jp.vuejs.org/v2/guide/forms.html#%E3%83%A9%E3%82%B8%E3%82%AA

これをコンポーネント化したい

具体的には下のように配列をpropで渡し、変更した値を受け取れるようにchangeHandlerを用意する

<Radio :list="radioList" :value="value" @change-handler="changeHandler" />

data: {
  value: "",
  list: [
    {
      id: "one",
      name: "radio",
      value: "One",
      label: "One"
    },
    {
      id: "two",
      name: "radio",
      value: "Two",
      label: "Two"
    }
  ]
}

Radioコンポーネント

<div v-for="item in list">
  <input
    type="radio"
    :id="item.id"
    :name="item.name"
    :value="item.value"
    :checked="item.value === value"
    v-model="item.value"
    @change.native="changeHandler($event)">
  <label :for="item.id">{{item.label}}</label>
</div>

methods: {
  changeHandler(event) {
    this.$emit("change-handler", event.currentTarget.value);
  }
}

ここで問題になったのは@changeとv-modelに設定する変数で

@changeは@change.nativeにしないと反応しなかった

v-modelには当初どの選択肢にも同じ変数を設定していたが、この場合レンダリングするとvalueに同じ値が入ってしまう

もはや@changeで値を親コンポーネントに渡しているので内部ではv-modelを消したところ、IE11以外は問題が解消したがIE11ではvalueそのものが消えてしまい別の問題が発生してしまった

そこで、v-modelに選択肢毎に別の変数を割り当てることにした