前提・実現したいこと
Vue.jsで同一name属性を持つ複数ラジオボタンをv-modelで監視したいです
該当のソースコード
parent.vue
1 <div> 2 <radio-button 3 v-for="period in periodList" 4 :key="period.name" 5 :content="period" 6 :name="radioButtonName" 7 @change="$listeners['change']" 8 ></radio-button> 9 <div class="column column--12"></div> 10 </div> 11 12 13 <script> 14 export default { 15 props: { 16 periodList: { 17 type: Array, 18 default: () => [], 19 }, 20 checkedPeriodId: { 21 type: Number, 22 default: 0, 23 }, 24 }, 25 } 26 </script>
radio.vue
1<template> 2 <div class="hoge"> 3 <div class="fuga"> 4 <input 5 v-model="checked" 6 :id="`radio-${name}${content.id}`" 7 :value="content.id" 8 :name="name" 9 type="radio"> 10 <label 11 :for="`radio-${name}${content.id}`" 12 >{{ content.name }}</label> 13 </div> 14 </div> 15</template> 16 17<script> 18 19export default { 20 data: { 21 checked: 0 22 }, 23 props: { 24 content: { 25 type: Object, 26 require: true, 27 }, 28 name: { 29 type: String, 30 require: true, 31 }, 32 }, 33 watch: { 34 checked(val) { 35 this.$emit('change', val) 36 } 37 } 38} 39</script>
試したこと
上記記述のv-modelは正しくありません。
なぜなら、各radio-buttonコンポーネントで管理しているcheckedプロパティが異なるからです。
なので、v-modelを分解し、v-onでchangeイベント・v-bindでhtmlのcheckedを監視するようにしました。
すると正常に動作しました。
ですが、v-modelを使用して上記を実現できないものかと思い質問させて頂きました。
v-modelを分解し、v-onでchangeイベント・v-bindでhtmlのcheckedを監視するようにしました
上記のコードは以下です。
parent.vue
1 <div> 2 <radio-button 3 v-for="period in periodList" 4 :key="period.name" 5 :content="period" 6 :name="radioButtonName" 7 :is-checked="isChecked(period.id)" 8 @change="$listeners['change']" 9 ></radio-button> 10 <div class="column column--12"></div> 11 </div> 12 13 <script> 14 export default { 15 computed: { 16 isChecked() { 17 return id => id === this.checkedPeriodId 18 }, 19 }, 20 props: { 21 periodList: { 22 type: Array, 23 default: () => [], 24 }, 25 checkedPeriodId: { 26 type: Number, 27 default: 0, 28 }, 29 }, 30 } 31 </script>
radio.vue
1<template> 2 <div class="hoge"> 3 <div class="fuga"> 4 <input 5 :checked="isChecked" 6 :id="`radio-${name}${content.id}`" 7 :value="content.id" 8 :name="name" 9 @change="emit" 10 type="radio"> 11 <label 12 :for="`radio-${name}${content.id}`" 13 >{{ content.name }}</label> 14 </div> 15 </div> 16</template> 17 18<script> 19 20export default { 21 props: { 22 content: { 23 type: Object, 24 require: true, 25 }, 26 name: { 27 type: String, 28 require: true, 29 }, 30 isChecked: { 31 type: Boolean, 32 require: true, 33 }, 34 }, 35 methods: { 36 emit() { 37 this.$emit('change', this.content.id) 38 }, 39 }, 40} 41</script
補足情報(FW/ツールのバージョンなど)
Vue:2.5.17
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/13 07:04
2020/05/13 09:41