【Vuetify.js】モダンなダイアログで、フォーム送信しよう

jQuery UI等を使って、自作でダイアログを作ることができるが、手っ取り早くモダンな感じのダイアログを作るにはVuetifyがおすすめです、

今回は、記事を追加するフォームをダイアログで作成して、そのまま送信してみたいと思います。

ソースコードの全体像は以下になる。

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <!-- ベント発火するコンポーネント -->
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-on="on" v-bind="attrs">記事を追加</v-btn>
    </template>

    <!-- ダイアログ本体 -->
    <v-card>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field label="RSS" v-model="rssForm.url" required></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue" text @click="dialog = false">Close</v-btn>
        <v-btn color="blue" text @click="addFeed">追加</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

#ダイアログを表示する、イベント発火するコンポーネント

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-on="on" v-bind="attrs">記事を追加</v-btn>
    </template>
  ・・・
  </v-dialog>
</template>

記事を追加するボタンを押すと、ダイアログが表示できるようにする。
templateのなかにtemplateと、奇妙なかたちだが、v-slot等を駆使して連動させている。

#ダイアログの本体

<template>
  <v-dialog v-model="dialog" max-width="600px">
  ・・・
    <v-card>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field label="RSS" v-model="rssForm.url" required></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue" text @click="dialog = false">Close</v-btn>
        <v-btn color="blue" text @click="addFeed">追加</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</tempalte>

<script>
export default {
  data () {
    return {
      dialog: false,
      rssForm: {
        url: ''
      }
    }
  },
  methods: {
    addFeed: async function () {
      // 記事を追加
      const res1 = await this.$axios.$post('/api/v1/feeds', {
        feed: this.rssForm
      })
      this.dialog = false
      this.rssForm = ''
    }
  }
}
</script>

<v-text-field>
フォームの入力部分になる。

<v-btn color="blue" text @click="addFeed">追加</v-btn>
あとは、入力内容をaddFeedというメソッドを定義することで、APIに送信できるようにすれば良い

<v-btn color="blue" text @click="dialog = false">Close</v-btn>
いわゆるキャンセルボタンにあたる。
dialogデータの論理値をfalseにすることで、ダイアログを閉じるようにしている。