Vue.jsでradioボタンをボタン化&もう一度押されたらクリアする

概要

• 選択肢の中からひとつだけ選んでもらいたい
• 選択肢はボタン的なデザインにしたい
• 同じ選択肢をもう一度押したら選択を解除したい

See the Pen Vue_radio buttons by reona396 (@reona396) on CodePen.

解説

「選択肢の中からひとつだけ選んでもらいたい」ということでradioボタンで実装している。
CSS側でradioボタンの穴みたいなやつを消している。

css

input[type="radio"] {
  display: none;
}

inputのlabelに対して背景色やborder-radiusを設定してボタンっぽく見せている。
また、forの指定で文字を押された時にも反応するようにしている。
さらに、クリックされたら背景色を変更するように実装した。

html

<input type="radio" v-model="selectedActivity" :id="activity.code" name="activity" :value="activity.value" @click="checkRadioStatus(activity.value)" />
<label class="activity" :for="activity.code">
  {{ activity.value }}
</label>

css

.activity {
  background: #aaa;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  margin-right: 5px;
}

input[name="activity"]:checked + label {
  background-color: #20d763;
  color: #fff;
}

「同じ選択肢をもう一度押したら選択を解除したい」については、クリック時に保持している値と選択された値が同じであれば保持内容をクリアしている。

js

checkRadioStatus(val) {
  if (this.selectedActivity === val) {
    this.selectedActivity = null;
  }
}