Vuetifyを使用。
投稿ボタンをクリックするとモーダルウィンドウでフォーム画面が表示されるプログラムを作っています。
ロゴやAuthのメニュー画面をFixedにしている関係なのか、モーダルウィンドウの縦の中央表示がされません。(ちょっと上によっている感じ)
component
1<template> 2 <v-row justify="center"> 3 <v-dialog 4 v-model="dialog" 5 max-width="600px" 6 > 7 8 <template v-slot:activator="{ on, attrs }"> 9 <v-btn 10 color="blue darken-1" 11 dark 12 depressed 13 small 14 v-bind="attrs" 15 v-on="on" 16 > 17 <v-icon class="body-2">mdi-fountain-pen-tip</v-icon> 18 <span class="px-2"><slot />投稿</span> 19 </v-btn> 20 </template> 21 22 <v-card> 23 24 <v-card-text> 25 <v-container> 26 27 <!--this_id--> 28 <!--user_id--> 29 30 <v-text-field label="名前*" required></v-text-field> 31 <v-select 32 v-model="select" 33 :items="attributes" 34 :rules="[v => !!v || 'Item is required']" 35 label="タグ*" 36 name="attributes" 37 required 38 ></v-select> 39 40 <v-text-field 41 label="タイトル*" 42 hint="内容のタイトルを設定しましょう。" 43 required 44 ></v-text-field> 45 46 <v-textarea 47 label="内容*" 48 hint="この場所の雑学や知識を共有しましょう。" 49 name="knowledge" 50 required 51 ></v-textarea> 52 53 </v-container> 54 </v-card-text> 55 56 <v-card-actions> 57 <v-spacer></v-spacer> 58 <v-btn color="blue darken-1" text @click="dialog = false">投稿</v-btn> 59 </v-card-actions> 60 61 </v-card> 62 </v-dialog> 63 </v-row> 64</template> 65 66<script> 67 68 export default{ 69 data: () => ({ 70 select: null, 71 attributes: [ 72 '1', 73 '2', 74 '3', 75 '4', 76 ], 77 dialog: false, 78 }) 79 } 80 81</script>
vuetifyの知見のある方、ご回答お待ちしております。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。