Recently, I embarked on a small project that involves using Laravel and Nuxt Js. The main objective of the project is to create a form for adding users to the database. Everything seems to be progressing smoothly, but there's a minor issue that I've encountered - my axios script sends multiple requests in what appears to be a loop:
Here is the complete code snippet:
<script>
import $ from 'jquery'
import Swal from 'sweetalert2'
import toastr from 'toastr'
import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'))
export default {
layout: 'app',
data () {
return {
laravelData: {},
formFields: {},
search: null,
refresh: false
}
},
watch: {
refresh () {
this.store()
this.refresh = false
}
},
mounted () {
$('a.just-kidding').hide()
this.index(1)
},
methods: {
index (page = 1) {
this.$axios.$get('/customer?page=' + page).then((response) => {
this.laravelData = response
this.refresh = true
})
},
store () {
const formData = $('#add-customer').serialize()
return this.$axios.$post('/customer/store', formData).then((response) => {
this.refresh = true
})
},
find () {
if (this.search === '') {
this.index()
} else {
this.$axios.$get('/customer/find?customer=' + this.search).then((response) => {
this.laravelData = response
})
}
},
destroy (customerId) {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
// this.$Progress.start();
this.$axios.$get('/customer/destroy?customer=' + customerId).then((response) => {
if (response.success) {
toastr.success(response.error, 'Ahoy Hoy !!', { 'positionClass': 'toast-top-left' })
this.refresh = true
} else {
toastr.error(response.error, 'Owh :( !!', { 'positionClass': 'toast-top-left' })
}
})
// this.$Progress.finish();
}
})
}
}
}
</script>
In addition, here is a snippet from my controller:
public function store(Request $request)
{
DB::transaction(function () use ($request){
$customerQuery = Customer::create($request->post('general'))->id;
$shippingInfos = array_merge(array('customer_id' => $customerQuery), $request->post('address'));
$shippingQuery = Shipping::create($shippingInfos);
return true;
});
}
Moreover, I have implemented a Middleware page called cors in my laravel application:
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
}
}