Vuetify でdialogの検索欄を作る　（メモ）

Vue でnavバーを作っている中で、広い検索欄を作りたくなりました。
そこでVuetifyのdialogを使って作ってみました。

まずはtemplate。

<template>
   <v-dialog v-model="dialog" persistent max-width="750">

     <!-- nav -->
     <template v-slot:activator="{ on, attrs }">
       <v-card color="grey lighten-4" flat tile>
         <v-toolbar>
           <v-app-bar-nav-icon></v-app-bar-nav-icon>
     
           <v-toolbar-title>Title</v-toolbar-title>
     
           <v-spacer></v-spacer>
     
           <v-btn icon v-bind="attrs" v-on="on">
             <v-icon>mdi-magnify</v-icon>
           </v-btn>
     
           <v-btn icon >
             <v-icon>mdi-heart</v-icon>
           </v-btn>
     
           <v-btn icon>
             <v-icon>mdi-dots-vertical</v-icon>
           </v-btn>

         </v-toolbar>
       </v-card>
     </template>
     <!-- end nav -->

     <!-- dialog -->
     <v-card>

       <v-card-title class="headline">
         Search
       </v-card-title>

       <v-text-field class="ml-10" v-model="search_text" label="Input" style="width: 90%;"></v-text-field>

       <v-card-actions>
         <v-spacer></v-spacer>

         <v-btn color="green darken-1" text @click="closeDialog">
           Cancel
         </v-btn>

         <v-btn color="green darken-1" text @click="searchDialog">
           Search
         </v-btn>
       </v-card-actions>

     </v-card>
     <!-- end dialog -->

   </v-dialog>
</template>

次にscript。

<script>
export default {
 name: 'Nav',
 data () {
   return {
     dialog: false,
     search_text: '',
   }
 },
 methods: {
   closeDialog() {
     this.dialog = false
     this.search_text = ''
   },
   searchDialog() {
     console.log(this.search_text)
     this.dialog = false
     this.search_text = ''
   }
 }
}
</script>

これを親コンポーネントに挿入すれば、簡単に広い検索欄を作ることができました。

参考にした公式ページ。