【Nuxt.js】Form応用編：axiosでGoogleFormと独自フォーム連携

# 前置き

実践編の続きです。
**GoogleFormと連携済みの
カスタマイズしたフォーム。
回答完了後の遷移先を変更します🐸**
今回はaxiosを使用し、
データ送信とページ遷移を行います！
外部ではなく
Nuxtディレクトリ 内に遷移させます！

axiosを使用せずに
データ送信・ページ遷移する方法は
こちらの記事でご確認ください🎈
https://note.com/aliz/n/n80f0586bc160


連携しただけだと、
GoogleFormの完了画面に飛んでしまいます。
これを別の画面に遷移させましょう🌟

【独自フォーム】
![picture_pc_aa05a4e30e797320eff33e8d34be6de4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/7615ce3c-5f42-ba9a-fcc8-109ba3402f23.png)



【現在】
GoogleForm回答完了画面
![picture_pc_b47cafc1e26cf140a89225876c313a4d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/8188fe0e-0fcb-6f74-0bf3-f5a9a2c54c90.png)


【変更後】
Nuxt内ページ
シンプルにpタグのテキストだけ。
pages直下の/thanks.vue
![picture_pc_1d5d72a9bafa0ba841397e93c95b51bd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/106e98de-bf38-6d56-2b5b-e75c1a911e74.png)

# なぜaxiosが必要？

非同期通信にしないと
強制的にGoogleFormの完了画面へ
遷移するから。
axiosでAPI通信が簡単になります！
今回はそーゆーのがあるんだ、
くらいの認識で大丈夫です⭕️

axiosを使わず
iframeをdisplay: noneするやり方も
こちらで書いたので参考にどうぞ♪
https://note.com/aliz/n/n80f0586bc160


# Step1: axiosインストール、準備

まずはaxiosの準備♪

【ターミナル】

```bash:ターミナル
$ npm install --save @nuxtjs/axios

```


【nuxt.config.js】

```nuxt.config.js

modules: [
   '@nuxtjs/axios',
],
axios: {}
```


ですがGoogleFormの場合
axiosを使用すると
CORSエラーが出てしまうようです。
動作はするみたいですが、
エラーは解消したい🍀

【nuxt.config.js】
モードを変更

```nuxt.config.js
mode: "universal",
```

【index.vue】

```index.vue
<script>
import axios from 'axios'
</script>
```

これで準備完了😎

# Step1: formタグにmethodsを追加

axiosの使い方は2パターンですね。
・asyncDataを使って書く
・methods内に書く

今回はsubmitした際に
inputのdataを送信したいので
methods内に書きます✍️

【index.vue】
submit時に、submitメソッドを行います。
イベント修飾子のpreventをつけて
リロードを防ぎます。

```index.vue
<template>
 <form @submit.prevent="submit">
  // 省略
 </form>
</template>

<script>
import axios from 'axios'
export default {
 methods: {
   submit () {
    // 後述
   }
 }
}
</script>
```

# Step2: 各inputにv-modelを追加、data格納

**input各項目にv-modelを追加**
今回は分かりやすく簡潔に、
1つのinputのみをデータ送信します。

【index.vue】

<input v-model="form.email" type="email" name="entry.434757334" placeholder="sample@mail.co.jp">

**dataに格納**

<script>
import axios from 'axios'
export default {
 data () {
   return {
     form: {
       email: "",
     }
   }
 },
}
</script>

# Step3: methodsにaxiosを記載

**・FormDataオブジェクト**
　送信データと、
　input="entry.{ number }"を一致させます。
　form action="{ URL }"もここに移動させます。
**・axios**
　今回はデータ送信を行うのでPOST
　.then~でデータ送信が成功した際の処理
　＝ページ遷移を書きます。

【index.vue】

```index.vue
<script>
import axios from 'axios'
export default {
 data () {
   return {
     form: {
       email: "",
     }
   }
 },
 methods: {
   submit () {
     const submitParams = new FormData()
     submitParams.append('entry.434757334', this.form.email);
     const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
     const GOOGLE_FORM_ACTION = 'https://docs.google.com/forms/u/0/d/e/1FAIpQLScgxuGsd5H3JacRh5c--o-PKoGByJZy13_RD8pN168kaOnK1Q/formResponse'
     axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)
       .then(() => {
         this.$router.push('thanks')
       })
   }
 }
}
</script>
```


こちらが参考になります。
https://www.yoheim.net/blog.php?q=20170801
https://alliance7.blogspot.com/2019/01/google-formaxioscros.html


# Step4: 実際に送信してみる

送信を押すと…

<img width="658" alt="スクリーンショット 2019-12-31 16.44.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b4e01b3d-2335-e89e-7c0b-1161cecf1c5f.png">

あれ？
401error…
IDpassを使用しているわけではないので
サーバーエラー。
GoogleFormの権限を見ると…
<img width="630" alt="スクリーンショット 2019-12-31 16.46.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0625d107-73d0-18d5-2d7f-82c18167fd0a.png">


ユーザーを限定していました。
☑️を外して再チャレンジ！😀
![post.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f81dbe6e-a0f8-02f8-ebde-3c207f8e3db4.gif)

できていますね🌟

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab