Javascript Vue JS联系人表单错误“；无法读取属性'；邮政'；“未定义”的定义；

我正在获取未定义错误的无法读取属性“post”，但我不确定我的错误确切位置。我希望有人能发现我缺少的东西，因为我是Vue JS的新手。先谢谢你

main.js

import Vue from 'vue';
import App from './App.vue';
import router from '../router';
import './assets/css/style.css'
import './assets/vendor/bootstrap/css/bootstrap.min.css';
import './assets/vendor/fontawesome-free/css/all.min.css';


Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <Nav></Nav>
    <router-view />
    <Footer></Footer>
  </div>
</template>

<script>
import Nav from "./components/Nav";
import Footer from "./components/Footer";
export default {
  components: {
    Nav,
    Footer
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

从“/components/Nav”导入导航；
从“/components/Footer”导入页脚；
导出默认值{
组成部分：{
导航，
页脚
}
};
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
}

在我的本地开发环境中，我遇到了一个类似的错误，但显示的是“name”而不是“post” 在生成之后，我得到一个错误，无法读取属性“post”

Contact.vue

<template>
  <div>
    <section class="page-section" id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Contact Us</h2>
            <h3 class="section-subheading text-white">We are ready to get your project up and live.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div v-if="sent">
              <h3
                class="text-white"
              >Thank you for contacting us. We will be in touch with you very soon.</h3>
            </div>
            <form @submit="onSubmit" class="contact">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <input
                      class="form-control"
                      id="name"
                      type="text"
                      placeholder="Your Name *"
                      required
                      data-validation-required-message="Please enter your name."
                      v-model="contact.name"
                    />
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input
                      class="form-control"
                      id="email"
                      type="email"
                      placeholder="Your Email *"
                      required
                      data-validation-required-message="Please enter your email address."
                      v-model="contact.email"
                    />
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input
                      class="form-control"
                      id="phone"
                      type="tel"
                      placeholder="Your Phone"
                      data-validation-required-message="Please enter your phone number."
                      v-model="contact.phone"
                    />
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <textarea
                      class="form-control"
                      id="message"
                      placeholder="Your Message *"
                      required="required"
                      data-validation-required-message="Please enter a message."
                      v-model="contact.message"
                    ></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button
                    id="sendMessageButton"
                    class="btn tell-me btn-xl text-uppercase"
                    type="submit"
                  >
                    Send
                    Message
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sent: false,
      contact: {
        name: "",
        email: "",
        phone: "",
        message: ""
      }
    };
  },
  methods: {
    /**
     * Clear the form
     */

    clearForm() {
      for (let field in this.contact) {
        this.contact[field] = "";
      }
    },

    /**
     * Handler for submit
     */

    onSubmit(evt) {
      evt.preventDefault();

      this.isSending = true;

      setTimeout(() => {
        // Build for data
        let form = new FormData();
        for (let field in this.contact) {
          form.append(field, this.contact[field]);
        }

        // Send form to server
        this.$http
          .post("http://rrspark.com/send_form_email.php", form)
          .then(response => {
            console.log(response);
            this.clearForm();
            this.isSending = false;
          })
          .catch(e => {
            console.log(e);
          });
      }, 1000);
    }
  }
};
</script>
<style lang="">
</style>

联系我们
我们已经准备好启动您的项目并投入使用。
感谢您联系我们。我们将很快与您联系。




发送
消息
导出默认值{
数据（）{
返回{
发送：错误，
联系人：{
姓名：“，
电邮：“，
电话：“，
信息：“
}
};
},
方法：{
/**
*清除表格
*/
clearForm（）{
for（让字段在此.contact中）{
此。联系人[字段]=“”；
}
},
/**
*提交处理程序
*/
onSubmit（evt）{
evt.preventDefault（）；
this.isSending=true；
设置超时（（）=>{
//为数据构建
设form=newformdata（）；
for（让字段在此.contact中）{
form.append（字段，this.contact[field]）；
}
//将表单发送到服务器
这是$http
.post（“http://rrspark.com/send_form_email.php“，表格）
。然后（响应=>{
控制台日志（响应）；
这个.clearForm（）；
this.isSending=false；
})
.catch（e=>{
控制台日志（e）；
});
}, 1000);
}
}
};

在根目录中 发送\u表单\u email.php

<?php
if(isset($_POST['email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "info@rrspark.com";
    $email_subject = "Email from website's contact form";

    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }


    // validation expected data exists
    if(!isset($_POST['name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['message'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }



    $first_name = $_POST['name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }

    $string_exp = "/^[A-Za-z .'-]+$/";

  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The Name you entered does not appear to be valid.<br />';
  }

 if(strlen($comments) < 2) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }

  if(strlen($error_message) > 0) {
    died($error_message);
  }

    $email_message = "Form details below.\n\n";


    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }



    $email_message .= "Name: ".clean_string($first_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Message: ".clean_string($comments)."\n";

// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>

<!-- include your own success html here -->
<h3>
Thank you for contacting us. We will be in touch with you very soon.
</h3>
<?php

}
?>

---

您只需在main.js中导入axios并像这样将其连接到vue，就可以从组件中使用它。$http

import axios from 'axios'

Vue.prototype.$http = axios;

我认为文档中建议使用axios，而不是standart vue资源包

我建议您安装Axios软件包

npm i axios

否则，请使用vue资源，如下所示：

import VueResource from "vue-resource"
Vue.use(VueResource);

this.$http.post

之后，您可以开始使用$http而不出现任何错误，如下所示：

import VueResource from "vue-resource"
Vue.use(VueResource);

this.$http.post