Enviar Mail con emailjs.com


#1

Hola chic@s estoy intentando armar un típico contactenos de un sitio web, para eso cree un form con Vuetify y sus validaciones. Pero al momento de realizar el envío VueJs me lanza este error:

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'send' of undefined"

found in

---> <VBtn>
       <VForm>
         <VCard>
           <Contactenos> at src/components/Contactenos.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

Les dejo mi código.

texto preformateado precedido por 4 espacios
<template>
  <div>
    <h1>Contactenos</h1>
     <v-layout>
      <v-flex xs12 sm8 offset-sm2>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field
                v-model="name"
                :rules="nameRules"
                label="Nombre"
                required
              ></v-text-field>
              <v-text-field
                v-model="email"
                :rules="emailRules"
                label="E-mail"
                hint="Escriba su dirección de correo electrónico que pronto lo contactaremos"
                required
              ></v-text-field>
              <v-textarea
                v-model="comentario"
                label="Comentario"
                :rules="comentarioRules"
                value=""
                hint="Escribanos algo"
                required
              ></v-textarea>
              <v-btn
                :disabled="!valid"
                @click="submit"
              >
                enviar
              </v-btn>
              <v-btn @click="clear">limpiar</v-btn>
            </v-form>
          </v-container>
        </v-card>
      </v-flex>
      </v-layout>
  </div>
</template>

<script>
//import axios from "axios";
import emailjs from "emailjs-com";

export default {
  name: "contactenos",

  data: () => ({
    valid: true,
    name: "",
    nameRules: [
      v => !!v || "Completar el nombre es obligatorio",
      v => (v && v.length > 3) || "El nombre debe ser mayor a tres caracteres"
    ],
    email: "",
    emailRules: [
      v => !!v || "Complete el E-mail por favor",
      v => /.+@.+/.test(v) || "E-mail es un campo obligatorio"
    ],
    comentario: "",
    comentarioRules: [v => !!v || "Complete el E-mail por favor"]
  }),
  /* eslint-disable */

  methods: {
    submit() {      
      
      (function() {
        emailjs.init("user_XXXXXXXXXXXXXXXXX");
      });

      let data = {
        from_name: this.name,
        from_mail: this.email,
        messaje: this.comentario
      };

      if (this.$refs.form.validate()) {
        console.log("hola me estan por enviar");
        emailjs.send("metalurgicamiele", "metalurgica", data).then(
          function(Response) {
            if (response.text === "OK") {
              alert("El correo se ha enviado con éxito");
            }
            console.log(
              "SUCCESS. status=%d, text=%s",
              response.status,
              resonse.text
            );
          },
          function(err) {
            alert("Ocurrio un problema al enviar  el correo");
            console.log("FAILDED. error=", err);
          }
        );
      }
    },
    clear() {
    this.$refs.form.reset();
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Intenté también hacer lo que dice este hilo en este mismo foro pero no tuve éxito.

Desde ya muchas gracias a quien darme una idea de lo que está ocurriendo.


#2

Muestranos el error stack trace completo, donde podamos ver mas sobre donde exactamente el problema es originado. Te recomendari ademas probar de enviar el email sin Vue, usando raw JS en algun nodejs script y asi asegurarte que el envio de emails sí funciona.


#3

Gracias @miljan te paso lo que me solicitaste (espero que sea esto)

Contactenos.vue?3bab:85 console.trace
submit 				        @ Contactenos.vue?3bab:85
invoker 			                @ vue.esm.js?efeb:2027
Vue.$emit 			        @ vue.esm.js?efeb:2538
click 				        @ vuetify.js?dc48:1357
invoker 			                @ vue.esm.js?efeb:2027
fn._withTask.fn._withTask 	@ vue.esm.js?efeb:1826

también te agrego mas detalle del error que en post original no lo incluí

TypeError: Cannot read property 'send' of undefined
at VueComponent.submit (Contactenos.vue?3bab:86)
at VueComponent.invoker (vue.esm.js?efeb:2027)
at VueComponent.Vue.$emit (vue.esm.js?efeb:2538)
at VueComponent.click (vuetify.js?dc48:1357)
at invoker (vue.esm.js?efeb:2027)
at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)
logError 			        @ vue.esm.js?efeb:1741
globalHandleError 		@ vue.esm.js?efeb:1732
handleError 			@ vue.esm.js?efeb:1721
Vue.$emit 			        @ vue.esm.js?efeb:2540
click 				        @ vuetify.js?dc48:1357
invoker 			        @ vue.esm.js?efeb:2027
fn._withTask.fn._withTask 	@ vue.esm.js?efeb:1826

Gracias.


#4

No aporta mucho. Por lo que crea un nuevo componente que solo tenga un div en el template y que en el mounted event envie el email. Dinos si el mismo se envia o que error te da.


#5

El problema radica en que debes importar el módulo utilizando require()

let emailjs = require('emailjs-com')

Además, yo haría el init desde el hook ‘created’, para que no tengas que hacerlo cada que se da click en el botón.

created(){
  emailjs.init("user_XXXXXXXXXXXXXXXXX");
},
methods: {
  submit(){
    emailjs.send( ... )
  }
}

Saludos


#6

Excelente @jfdelarosa ese era el problema, que no estaba importando ‘emailjs-com’; pero con lo que me pasaste ahí lo toma. Espero algún día poder darte una mano como me la diste vos con esta solución.
También metí el emailjs.init() dentro del hook ‘created’.

Gracias.