前提・実現したいこと
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にデータを受け渡せるようにしたいのですが、どのようにすれば可能になるでしょうか。
ご教授お願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/07 09:36