あきぞらです。
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>
ラジオボタン以外の要素も同じ方法で初期値を設定できます！