vue.js nuxt.js custom-google-form ajax autocomplete-zipcode

vue-google-form-ajax-autocomplete

<template>
  <div>
    <div>
      <div>
        <h2>
          お問い合わせフォーム
        </h2>
        <p v-if="!check">
          <span class="check"></span>必須項目
        </p>
        <p v-if="check">
          確認画面
        </p>
      </div>
      <div v-if="!check">
        <form @submit.prevent="submit">
          <div>
            <label for="type">
              お問い合わせ種別
              <span class="check"></span>
            </label>
            <select id="type" v-model="form.contacttype" required>
              <option value="type-your-contacttype1">contacttype1</option>
              <option value="type-your-contacttype2">contacttype2</option>
              <option value="type-your-contacttype3">contacttype3</option>
            </select>
          </div>
          <div>
            <label for="company__name">
              会社名
              <span class="check"></span>
            </label>
            <input id="company__name" v-model="form.company" type="text" required>
          </div>
          <div>
            <label for="name">
              氏名
              <span class="check"></span>
            </label>
            <input id="name" v-model="form.name" type="text" required>
          </div>
          <div>
            <label for="kana">
              フリガナ
              <span class="check"></span>
            </label>
            <input id="kana" v-model="form.kana" type="text" pattern="[\u30A1-\u30F6]*" required>
          </div>
          <div>
            <label for="email">
              メールアドレス
              <span class="check"></span>
            </label>
            <input id="email" v-model="form.mail" type="email" required>
          </div>
          <div>
            <label for="zip">
              郵便番号
              <span class="check"></span>
            </label>
            <input @change="autoCompleteAddress(form.zip)" id="zip" v-model="form.zip" type="text" required>
          </div>
          <div>
            <label for="address">
              住所
              <span class="check"></span>
            </label>
            <input id="address" v-model="form.address" type="text" required>
          </div>
          <div>
            <label for="phonenumber">
              電話番号
              <span class="check"></span>
            </label>
            <input id="phonenumber" v-model="form.phone" type="tel" required>
          </div>
          <div>
            <label for="faxnumber">FAX番号</label>
            <input id="faxnumber" v-model="form.fax" type="tel">
          </div>
          <div>
            <label for="msg">
              お問い合わせ内容
              <span class="check"></span>
            </label>
            <textarea id="msg" v-model="form.message" required></textarea>
          </div>
          <div>
            <button type="submit" name="button">
              <p>確認</p>
            </button>
          </div>
        </form>
      </div>
      <div v-if="check">
        <div>
          <div>
            お問い合わせ種別
            <span class="textcheck">{{form.contacttype}}</span>
          </div>
          <div>
            会社名
            <span class="textcheck">{{form.company}}</span>
          </div>
          <div>
            氏名
            <span class="textcheck">{{form.name}}</span>
          </div>
          <div>
            フリガナ
            <span class="textcheck">{{form.kana}}</span>
          </div>
          <div>
            メールアドレス
            <span class="textcheck">{{form.mail}}</span>
          </div>
          <div>
            郵便番号
            <span class="textcheck">{{form.zip}}</span>
          </div>
          <div>
            住所
            <span class="textcheck">{{form.address}}</span>
          </div>
          <div>
            電話番号
            <span class="textcheck">{{form.phone}}</span>
          </div>
          <div class="form-texts">
          　FAX番号
            <span class="textcheck">{{form.fax}}</span>
          </div>
          <div class="form-texts">
            お問い合わせ内容
            <span class="textcheck">{{form.message}}</span>
          </div>
          <div>
            <button @click="submitComplete" type="submit" name="button">
              <p>送信</p>
            </button>
            <button class="return" @click="submit" type="submit" name="button">
              <p>修正</p>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import zipcodeJa from 'zipcode-ja';
import axios from "axios";
export default {
  head () {
    return {
      title: 'お問い合わせ'
    }
  },
  data() {
    return {
      check: false,
      form: {
        contacttype: "",
        company: "",
        name: "",
        kana: "",
        mail: "",
        zip: "",
        address: "",
        phone: "",
        fax: "",
        message: "",
      },
    }
  },
  methods: {
    submit() {
      this.check = !this.check
      console.log(this.check)
    },
    autoCompleteAddress(zip){
      this.form.address = ""
      if(zipcodeJa[zip]){
        for(let i=0; i < zipcodeJa[zip].address.length; i++)
        this.form.address = this.form.address+zipcodeJa[zip].address[i]
      }
    },
    submitComplete() {
      const submitParams = new FormData()
      submitParams.append("entry.0123456789", this.form.contacttype)
      submitParams.append("entry.0123456789", this.form.company)
      submitParams.append("entry.0123456789", this.form.name)
      submitParams.append("entry.0123456789", this.form.kana)
      submitParams.append("entry.0123456789", this.form.mail)
      submitParams.append("entry.0123456789", this.form.address)
      submitParams.append("entry.0123456789", this.form.phone)
      submitParams.append("entry.0123456789", this.form.fax)
      submitParams.append("entry.0123456789", this.form.message)
      const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
      const GOOGLE_FORM_ACTION =
        "https://type-google-form-url"
      axios.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams).then(() => {
        this.$router.push("type-next-page-name")
      })
    },
  },
}
</script>