Laravel redirect with data in vue - laravel

Question

I'm trying to redirect my controller with data in laravel to a vue file which then displays the data. It's a SPA and I'm using vue router.
Here is my controller redirection:
return redirect('/bedankt-voor-je-bericht')->with('mailstatus', 'Bedankt voor uw bericht!');
And here is my vue file:
<script>
export default {
mounted() {
axios.get('/bedankt-voor-je-bericht')
.then((response) => {
console.log(response);
});
}
}
</script>
The response data does not include the mailstatus variable at the moment. But how will i accomplish this? Any help would be appreciated.
Update:
What is I want to send a form how would we accomplish that? Here is my code for the form:
<form method="post" action="/api/contact/send">
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Naam</label>
<input class="border border-[#888888] rounded-[10px] min-h-[35px] px-2" type="text" name="name">
</div>
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Emailadres</label>
<input class="border border-[#888888] rounded-[10px] min-h-[35px] px-2" type="text" name="email">
</div>
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Bericht</label>
<textarea name="body" class="border border-[#888888] rounded-[10px] p-2 min-h-[215px] resize-none"></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="border border-[#25d097] bg-white text-[#25d097] w-full box-border p-2 rounded-[8px] hover:bg-[#25d097] hover:text-[#ffffff]">Verstuur</button>
</div>
</form>
Then i have my routes/api like this Route::post('/contact/send', ContactController::class); And in my controller I have this:
public function __invoke(Request $request)
{
if ($request->email && $request->name && $request->body) {
$mail = (new Mailsettings)->setup();
$mail->setFrom($request->email, $request->name);
$mail->addAddress(env('MAIL_USERNAME'), 'Plugzy');
$mail->addReplyTo($request->email, $request->name);
$mail->isHTML(true);
$mail->Subject = 'Nieuwe e-mail Plugzy';
$mail->Body = $request->body;
// $mail->send();
return response()->json(['mailstatus', 'Bedankt voor uw bericht!'], 200);
}
return response()->json(['mailstatus', 'Er ontbreekt iets!'], 200);
}
If the action is pointed to the api then there is no redirection to the next page.

Answer 1

For anyone that might run into this problem I've found an answer for returning a response without any page reloads. There's a npm package called v-form
thanks to this package I've managed to make it work as following:
This is my vue file for submitting the form:
<form #submit.prevent="sendemail()" #keydown="form.onKeydown($event)">
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Naam</label>
<input
v-model="form.name"
class="border border-[#888888] rounded-[10px] min-h-[35px] px-2"
type="text"
name="name">
</div>
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Emailadres</label>
<input v-model="form.email"
class="border border-[#888888] rounded-[10px] min-h-[35px] px-2"
type="text"
name="email">
</div>
<div class="flex flex-col mb-[15px]">
<label class="font-bold text-[20px] mb-[5px]" for="">Bericht</label>
<textarea v-model="form.body"
name="body"
class="border border-[#888888] rounded-[10px] p-2 min-h-[215px] resize-none">
</textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="border border-[#25d097] bg-white text-[#25d097] w-full box-border p-2 rounded-[8px] hover:bg-[#25d097] hover:text-[#ffffff]">Verstuur</button>
</div>
</form>
<script>
import Form from 'vform'
export default {
data() {
return {
form: new Form({
name: '',
email: '',
body: ''
})
}
},
methods: {
sendemail: async function () {
const response = await this.form.post('/api/contact/send')
console.log(response);
}
}
}
</script>
And then in my api.php I've got this api route defined: Route::post('/contact/send', ContactController::class);. Which will activate my controller which has the following inside:
return response()->json(['mailstatus', 'Bedankt voor uw bericht!'], 200);. So now in the vue file I'll get the correct response without a page reload.