CODEWITHSUNDEEP
phpmysqllaravelvue.js
MJ DEV
MJ DEV

Reputation: 704

send email with vuejs

I want to send emails with laravel and vuejs. I wrote laravel controller function like below 

Mail::send(['text' => 'mail'],['name', 'David'], function($message){
    $message->to('[email protected]')->subject('Test Email');
    $message->from('[email protected]', 'David');
});
return response()->json(['success'=>true]);

and I wrote a vuejs send email function for the @click method

this.axios.get('https://techwizlanka/send', {
    body: JSON.stringify(this.user),
    headers: {
        'content-type': 'application/json',
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})
.then(res => res.json())
.then(data => {
    console.log("email sent");
})
.catch(err => console.error(err.toString()));

I call this URL like this 

Route::get('/send', 'MailController@sendMail');

But it shows this error message when clicking the send button.

app.js:44786 Uncaught TypeError: Cannot read property 'get' of undefined at VueComponent.sendMail (app.js:44786) at invoker (app.js:34769) at HTMLButtonElement.fn._withTask.fn._withTask (app.js:34568)

Can anyone help me to fix this issue? Basically, I want to send an email when submitting a form with laravel and vuejs.

Upvotes: 0

Views: 4932

Answers (2)

Glenn Carlo Baquero
Glenn Carlo Baquero

Reputation: 11

try to use this method 

axios.post(url, data)
      .then(response => {

})

and make your route post in your route/web.php

in using get method function not expecting a request but in your situation you pass a request.

Upvotes: 0

Rifqi
Rifqi

Reputation: 149

Definitely it's because you are not calling axios properly. Please make sure what does this on this.axios refer to.

Assuming you installed axios using npm install axios. Then try to import and use the axios more or less as follow:

import axios from 'axios';

export default {
  data() {
    return {
        user: [],
    };
  },

  methods: {
    click() {
        axios
        .get('https://techwizlanka/send', {
            body: JSON.stringify(this.user),
            headers: {
                'content-type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
        })
        .then(res => res.json())
        .then(data => {
            console.log("email sent");
        })
        .catch(err => console.error(err.toString()));
    },
  },

  ...
}

Upvotes: 2

Related Questions