CODEWITHSUNDEEP
javascriptlaravelvue.jsaxiosnuxt.js
Amine Bouhaddi
Amine Bouhaddi

Reputation: 584

Axios send too multiples request after submiting the form

I started working on small project using Laravel and Nuxt Js, so i have created a small for to add users in the database. every thing is going well, i have a small issue, my axios script send multiple request like a loop :

this is the full code : 

<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>

and here is 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;
    });
}

i have created a Middleware page called cors in my laravel, 

    <?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    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');
    }
}

Upvotes: 1

Views: 555

Answers (1)

ceejayoz
ceejayoz

Reputation: 180177

  watch: {
    refresh () {
      this.store()
      this.refresh = false
    }
  },

This will cause an infinite loop, because you're changing this.refresh in the watcher function that's monitoring this.refresh, which will re-trigger the watch function, which will change it, which will trigger the watcher, which will change it, which will trigger the watcher, which will change it, which will trigger the watcher, which will change it, which will trigger the watcher, which will change it...

You get the point.

Upvotes: 1

Related Questions