vue + vuetifyを勉強しており、SLOTについて質問です。
性別選択用として以下のようなコンポーネントを作成しました。
gender.vue
1<template> 2 <v-radio-group 3 v-bind="$attrs" 4 v-on="$listeners" 5 > 6 <template v-for="(value, name) in $slots" v-slot:[name]> 7 <slot :name="name" /> 8 </template> 9 <v-radio :label="labelMale" :value="valueMale" :color="colorMale"> 10 <template v-slot:label> 11 <slot name="labelSlotMale" /> 12 </template> 13 </v-radio> 14 <v-radio :label="labelFemale" :value="valueFemale" :color="colorFemale"> 15 <template v-slot:label> 16 <slot name="labelSlotFemale" /> 17 </template> 18 </v-radio> 19 </v-radio-group> 20</template> 21 22<script> 23export default { 24 inheritAttrs: false, 25 model: { 26 prop: "value", 27 event: "change" 28 }, 29 /************************************************************************************************ 30 * PROPS 31 ************************************************************************************************/ 32 props: { 33 colorMale: { 34 type: String, 35 default: "primary", 36 required: false 37 }, 38 colorFemale: { 39 type: String, 40 default: "primary", 41 required: false 42 }, 43 labelMale: { 44 type: String, 45 default: "男性", 46 required: false 47 }, 48 labelFemale: { 49 type: String, 50 default: "女性", 51 required: false 52 }, 53 valueMale: { 54 type: String, 55 default: "male", 56 required: false 57 }, 58 valueFemale: { 59 type: String, 60 default: "female", 61 required: false 62 } 63 }, 64}; 65</script> 66 67<style></style> 68
v-radio-groupのすべてのSLOTを親から使用することができることは確認したのですが、この状態ではv-radioのlabelスロットしか使用できません。
※この時点でv-radioのlabelSlotMaleスロットが正常に動作することは確認しました。
defaultやmessageスロットについても個別に用意すれば良いのですが、他のコンポーネントを拡張しようとした場合は大変です。
そこで、v-radioについてもv-forを使ってすべてのスロットを用意すれば良いと考えたのですが、v-radio内の<slot>に付ける名前で引っかかってしまいました。
vue
1~省略~ 2 <v-radio :label="labelMale" :value="valueMale" :color="colorMale"> 3 <template v-for="(value, name) in $slots" v-slot:[name]> 4 <slot :name="`${name}SlotMale`" /> 5 </template> 6 </v-radio> 7~省略~
上記で「labelMale」というスロットが作成されると思ったのですが、親から<template v-slot:labelSlotMale>を使用しても適用されません。
スロットのname属性に対するインラインの書き方に誤りがあるのでしょうか?
どなたか、ご回答いただけますようお願い申し上げます。
あなたの回答
tips
プレビュー