Vue/Nuxt

【Vue.js】ラジオボタンの初期値を設定する方法!

あきぞらです。

Vue.jsでラジオボタンやプルダウンを設定しているときに、

初期値を設定する際、少しつまったので

その方法を紹介していきます。

v-modelを設定しdataに初期値を設定する

性別を選ぶようなラジオボタンを例にあげてみます。

<template>
  <div>
    <label>
      <input
      type="radio"
      value="女性"
      v-model="gender"
      >
      <span>女性</span>
    </label>
    <label>
      <input
      type="radio"
      value="男性"
      v-model="gender"
      >
      <span>男性</span>
    </label>
  </div>
</template>

ラジオボタン要素のv-model"gender"という名前で設定しています。

この要素の初期値(画面を開いた時に選択されている値)に「女性」を設定するには、

dataに定義してあるgenderに女性を設定してあげます。

<script>
export default {
  data() {
    return {
      gender: '女性',
    },
  }
}
</script>

ラジオボタン以外の要素も同じ方法で初期値を設定できます!

-Vue/Nuxt

Copyright© あきぞらてっく , 2022 All Rights Reserved Powered by AFFINGER5.