Vue.js axiosでpostができません。

Question

前提・実現したいこと

vue-cliでサイト構築をおこなっています。
Vue.jsでaxiosを使いphpMailerにPostしたいと考えています。

発生している問題・エラーメッセージ

https://github.com/axios/axiosを参考にしているのですが、
Typeerrorが発生してしまいます。

can't not read propety 'post' of undefine at submitform

該当のソースコード

<template>
  <div>
    <h2 class="text-center">Contact Form</h2>
    <form id="contact_form"  v-on:submit.prevent="submitForm" action="">
      <div class="form-group">
        <label for="name">Name:</label>
        <input v-model="name" v-on:blur="isValidName" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input v-model="email" v-on:blur="isValidEmail" class="form-control" name="email" type="email" />
      </div>
      <div class="form-group">
        <label for="message">Message</label>
        <textarea v-model="message" v-on:blur="isValidMessage" class="form-control" name="message"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send</button>
    </form>

  </div>

</template>

<script>
  export default {
    data() {
      return{
        name: '',
        email:'',
        message:'',
      }
    },
    methods: {
      isValidName: function () {
        var valid = this.name.length > 0;
        console.log('checking for a valid name: ' + valid);
        return valid;
      },
      isValidEmail: function () {
        var valid = this.email.indexOf('@') > 0;
        console.log('checking for a valid email: ' + valid);
        return valid;
      },
      isValidMessage: function () {
        var valid = (this.message.length > 0) &&
          (this.message.length < this.maxLength);
        console.log('checking for a valid message: ' + valid);
        return valid;
      },
      checkMessage: function () {
      },
      submitForm: function () {
        console.log('submitting message...');
        this.axios.post('/contact/contact.php', {
          name: this.name,
          email: this.email,
          message: this.message
        }).then(function (response) {
          console.log(response);
          alert('成功');
        }).catch(function (error) {
          console.log(error);
          alert('失敗');
        });
      }
    }
  }
</script>

// main.js

import axios from 'axios'
Vue.prototype.$http = axios;

試したこと

再インストールやドキュメントのコードコピペでも同じエラーが発生します。
phpにデータを受け渡せるようにしたいのですが、どのようにすれば可能になるでしょうか。
ご教授お願い致します。

Answer 1

よっ

takanakanakanaが書きましたコードをチェックして、こちらも「cannot read property 'post' of undefined」が出ていました。

間違えているところ :

• main.jsに :

Vue.prototype.$http = axios; ではなくて
Vue.$http = axios;にしてください

• templateファイルに :

とこかでmain.jsがimportされてなかったら、importしてください
直接同じファイルにこう書けますう :

import Vue from 'vue'
import axios from 'axios'
Vue.$http = axios;

そのあと、送信する時に、this.axiosを行なっていますが、ここはミスです。
正解な書き方は :

axios.post()

Vueの$httpにaxiosを設定していますので、

Vue.$http.post()

でもいいです。

:)

Comments

[takanakanakana]

解決しました！とても分かりやすく解説していただき本当にありがとうございます！感謝してもしきれません！