VueでWEBアプリ(14)

前回と同じく、フォームの実装です。

とりあえずPOSTができるようになりましたので、どういう動きの流れになっているかを復習がてらにここに残しておきます。

フォームの形の参考元は以下の記事です。

Vue & Vuetifyでバリデーション付きのフォームを作ってみる

---

参考記事に基づいて実装したバリデーションチェックで、すべての項目でそれぞれ

入力必須・10文字制限を入れています。

未記入ありもしくは文字数をオーバーすると、送信ボタンを押しても登録処理が動かないようにしています。

未記入有で送信不可

全項目記入・10文字以内ではじめて登録処理を通ります。

POST後、送信ボタン横に「送信完了！」が表示され、POSTされたことがわかるようにしています。

送信成功時

逆に、送信失敗時は「送信失敗」が表示されるようにしています。本当はもう少し目立つ見た目のほうがいいんでしょうが…それは次の機会に。

下の画像はPOSTのURLを間違えた状態で送信しようとした場合です。

送信失敗時

コードは以下のようになりました。

  methods: {
     async submit() {
        const params = {
          title: this.title, //タイトル
          author: this.author, //投稿者
          post_date: this.post_date, //投稿日時
          content: this.content, // 本文
        }
        const post_url = 'https://directus.minamirnd.work/items/articles';
        if (this.$refs.formref.validate()) {
        // すべてのバリデーションが通過したときのみ
        // if文の中に入る
          try{
            await axios.post(post_url, params)
            this.success = true; // 「送信成功！」表示
            this.failure = false; // 「送信失敗」非表示
          } catch(e) {
            console.log("response error")
            this.failure = true; // 「送信失敗」表示
          }
        } else {
          this.success = false;
        }        
      }
  }

---

この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。

https://github.com/izumi-shibano/test-vue