パソ君
・Vue.jsでラジオボタンを動的に使う方法は？
こんな疑問にお答えします。
フォーム部分で「v-model」を用いて動的に変えたい場合がありますよね。
今回は自分用のメモとして「ラジオボタン」の動的に使う方法をまとめてみました！
ジト
参考にどうぞ
ということで、この記事では「Vue.jsでラジオボタンを動的に使う」について解説していきます！
この記事でわかること
Vue.jsでラジオボタンを動的に使う
【解説】Vue.jsのv-modelの使い方【サンプルコードあり】 【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】
ラジオボタンを表示する型は文字列なので、初期値は空文字にします。
下記みたいに↓
const app = Vue.createApp({
data: () => ({
radioItem: ''
})
}).mount('#app')実際にラジオボタンをv-modelで動的に使ったサンプルを作ってみました。
See the Pen vue ラジオボタン① by jito-coder (@jito-coder) on CodePen.
ラジオボタンのクリック値を変えると、下部分にその値が出力されますよね。
<div id="app">
<!-- 1つ目 -->
<input type="radio" id="apple" value="りんご" v-model="radioItem">
<label for="apple">りんご</label>
<!-- 2つ目 -->
<input type="radio" id="orange" value="オレンジ" v-model="radioItem">
<label for="orange">オレンジ</label>
<!-- 3つ目 -->
<input type="radio" id="peach" value="もも" v-model="radioItem">
<label for="peach">もも</label>
<!-- 出力用 -->
<p>値は：{{ radioItem }}</p>
</div>const app = Vue.createApp({
data: () => ({
radioItem: ''
})
}).mount('#app')「v-model」を使って「radioItem」を双方向データバインディングします。
そしてpタグ内にマスタッシュ構文にて「radioItem」をいれて紐づけしました。
初期値は空文字にして、v-modelの値を同じにしておくのが注意点です。
【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】
- デフォルトの型は「文字列」なので初期値は空文字にする
- 「v-model」の値を同じにしておく
ジト
Vue.jsでラジオボタンを使う時はためしてみてね！
【解説】Vue.jsでテキストエリアをバインディングする方法 
【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】 
【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】
