質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

0回答

844閲覧

[vue]slotの名前を動的に変えたい

sishamo

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/11/03 02:02

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属性に対するインラインの書き方に誤りがあるのでしょうか?

どなたか、ご回答いただけますようお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問