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.


#7

Buenas tardes desde Guatemala.

Podrías darme una mejor orientación de cómo enviar emails desde mi sistema web que estoy desarrollando ?
Tengo una opción donde cada trabajador registra sus actividades diarias realizadas al final del día y éstas son grabadas en un nodo en firebase.

La intención es enviarle un correo al supervisor (tengo registrado al supervisor con su nombre, email, etc.) después de que se hayan registrado las tareas de los empleados.

Gracias anticipadas.


#8

@jcjocop tal cual está el código en este post podes utilizarlo para enviar un mail desde emailjs.com.
Igualmente te posteo el código nuevamente, lo copie del sitio que tengo funcionando; obviamente tienes que reemplazar el emailjs.init(‘user_XXXXXXX’) por el tuyo y también el emailjs.send(“EmailServiceID”, “NombreDelTemplate”, data)

Podés poner el mail del supervisor fijo dentro del template para que le lleguen los mails a él.

<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="from_name"
                :rules="from_nameRules"
                label="Nombre"
                required
              ></v-text-field>
              <v-text-field
                v-model="from_email"
                :rules="from_emailRules"
                label="E-mail"
                hint="Escriba su dirección de correo electrónico que pronto lo contactaremos"
                required
              ></v-text-field>
              <v-text-field
                v-model="subject"
                :rules="subjectRules"
                label="Asunto"
                required
              ></v-text-field>
              <v-textarea
                v-model="message"
                :rules="messageRules"
                label="Comentario"
                value=""
                hint="Escribanos algo"
                required
              ></v-textarea>
              <v-alert
                :value="alert"
                v-model="alert"
                type="success"
                dismissible
                transition="scale-transition"
              >
                El correo se ha enviado con éxito
              </v-alert>
              <v-btn
                :disabled="!valid"
                :loading="loading"
                @click="submit"
                @click.native="loader = 'loading'"
              >
                enviar
              </v-btn>
              <v-btn @click="clear">limpiar</v-btn>
            </v-form>
          </v-container>
        </v-card>
      </v-flex>
      </v-layout>
  </div>
</template>

<script>
let emailjs = require("emailjs-com");

export default {
  name: "contactenos",

  data: () => ({
    valid: true,
    from_name: "",
    from_nameRules: [
      v => !!v || "Completar el nombre es obligatorio",
      v => (v && v.length > 3) || "El nombre debe ser mayor a tres caracteres"
    ],
    from_email: "",
    from_emailRules: [
      v => !!v || "Complete el E-mail por favor",
      v => /.+@.+/.test(v) || "E-mail es un campo obligatorio"
    ],
    subject: "",
    subjectRules: [
      v => !!v || "Complete el campo Asunto",
      v => (v && v.length > 3) || "Asunto es un campo obligatorio"
    ],
    message: "",
    messageRules: [v => !!v || "Complete el E-mail por favor"],
    alert: false,
    loader: null,
    loading: false,
  }),
  
  watch: {
    loader () {
      const l = this.loader
      this[l] = !this[l]
      this.alert = true
      setTimeout(() => (this[l] = false), 3000)

      this.loader = null
    }
  },
  
  created(){
    emailjs.init("user_XXXXXXXX");
  },

  methods: {
    submit() {
      let data = {
        from_name: this.from_name,
        from_email: this.from_email,
        message: this.message,
        subject: this.subject
      };

      if (this.$refs.form.validate()) {
        console.log("hola me estan por enviar");
        emailjs.send("EmailServiceID", "Template", 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,
              Response.text
            );
          },
          function(err) {
            alert("Ocurrio un problema al enviar  el correo");
            console.log("FAILDED. error=", err);
          },
          this.$refs.form.reset()
        );
      }
    },
    clear() {
      this.$refs.form.reset();
    }
  }
};
</script>

Saludos.


#9

Gracias por responder. crearé un html con el código que me has enviado para empezar a familiarizarme y luego te cuento.

Solo me resta preguntarte: utilizaste npm para integrar emailjs ? o lo tienes como referencia en un script en el html ? Disculpá mi ignorancia.


#10

Utilicé este comando para integrar emailjs

npm install emailjs-com --save

Saludos.


#11

Gracias de nuevo.

Saludos


#12

No me están respondiendo los “v-x”. Es decir, v-alert, v-btn, v-textarea, v-text-field, v-container, v-card, v-flex, v-layout, no los reconoce.

Disculpá


#13

En mi proyecto uso Vuetify y esos “v-x” pertenecen a Vuetify.
Si no quieres usar eso solo reemplaza con un <button> o lo que fuere necesario. También puedes usar Bootstrap.
Si igualmente quieres seguir adelante usando Vuetify solo tienen que instalarlo

vue add vuetify

y agregar esto en tu main.js por ejemplo

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

para mas información dirigirte aquí https://vuetifyjs.com/en/getting-started/quick-start

Saludos.


#14

Me funcionó el envío de correos con un html y su script, más no al integrarlo en un proyecto de VUEjs.

Este es el error:
vue.esm.js?efeb:591 [Vue warn]: Error in created hook: “TypeError: Cannot read property ‘init’ of undefined”

Esta es mi linea de código para el init.
image

El error sucede al nomás cargar el template.

Estas son las primeras líneas de código en el script.

image

La versión instalada es la 2.3.2.
image

Gracias anticipadas