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