Q&A
知りたいこと
HTMLでラジオボタンを実装する際、name属性を指定してグループを定義しますが、Vue.jsでv-modelを用いたラジオボタンを実装する場合、name属性を指定しなくても正しくグループ分けされるのはなぜでしょうか。
該当のソースコード
ラジオボタンで選択した項目がそのラジオボタンの下に描画されるコードです。
HTML
1<div id="app"> 2 <label><input type="radio" value="a" v-model="str"> A</label> 3 <label><input type="radio" value="b" v-model="str"> B</label> 4 <label><input type="radio" value="c" v-model="str"> C</label> 5 <p>{{ str }}</p> 6 7 <label><input type="radio" value="1" v-model="num"> 1</label> 8 <label><input type="radio" value="2" v-model="num"> 2</label> 9 <label><input type="radio" value="3" v-model="num"> 3</label> 10 <p>{{ num }}</p> 11</div>
javascript
1new Vue({ 2 el: '#app', 3 data: { 4 str: '', 5 num: '' 6 } 7})
確認したこと
Vue.js公式ドキュメントでもname属性は指定されていませんでした。
推測されること
ソースコードから、v-modelの値を同じにすることでグループ分けされていると推定できますが、それがどのような仕組みでこうなっているのかまで理解できていない状態です。
あなたの回答
tips
プレビュー
