Erik James Robles:
Estoy consiguiendo el 'post' no se puede leer la propiedad de error no definido, pero no estoy seguro de que mi error es exactamente. Estoy esperando que alguien puede ver algo que me falta ya que soy nuevo en Vue JS. Gracias de antemano.
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>
En mi entorno de desarrollo locales, que estoy recibiendo un error similar, pero la palabra 'nombre' muestra arriba en lugar de 'post' Después de la construcción, me sale el error No se puede leer la propiedad '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>
En el directorio raíz send_form_email.php
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "[email protected]";
$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
}
?>
No estoy claro sobre si debería usar http o $ $ axios ni cómo ponerlas en práctica como he mencionado antes, soy nuevo en el Vue. Gracias.
MohKoma:
Le recomiendo que instale el paquete de Axios.
npm i axios
utilizar de otro modo el vue de recursos, así:
import VueResource from "vue-resource"
Vue.use(VueResource);
Después de que se puede empezar a utilizar $ http sin ningún error, así:
this.$http.post