![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
パソ君
・Vue.jsでラジオボタンを動的に使う方法は?
こんな疑問にお答えします。
フォーム部分で「v-model」を用いて動的に変えたい場合がありますよね。
今回は自分用のメモとして「ラジオボタン」の動的に使う方法をまとめてみました!
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
参考にどうぞ
ということで、この記事では「Vue.jsでラジオボタンを動的に使う」について解説していきます!
この記事でわかること
Vue.jsでラジオボタンを動的に使う
![](https://jito-site.com/wp-content/uploads/2024/05/vue-v-model-160x160.png)
【解説】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」の値を同じにしておく
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ジト
Vue.jsでラジオボタンを使う時はためしてみてね!
![](https://jito-site.com/wp-content/uploads/2024/04/vue-textarea-160x160.png)
![](https://jito-site.com/wp-content/uploads/2024/04/vue-select-160x160.png)
![](https://jito-site.com/wp-content/uploads/2024/06/vue-check-160x160.png)