How to get response data in console?

I want to get warranty_id and product_id and date

blade.php

<script>
    let product_id = "{{ $product->id}}";
    let warranty_id= "{{ $warranty->id}}";
    const app = new Vue({
        el: '#app',
        data: {
            dates: [],
            products: [],
            warranties: [],
            date: '',
            product_id:  product_id ,
            warranty_id: warranty_id,
        },
        watch: {
            date(newDate) {
                const showType = document.getElementById('showType');
                showType.textContent = newDate;
                axios.get('{{ route('product.warranty.save') }}', {
                    date: newDate,
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        console.log('get Response---->: ', response);
                    })
                    .catch(error => {
                        console.log('Error:', error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

web.php

Route::get('products/warranties/save', [App\Http\Controllers\Admin\WarrantyController::class, 'save'])->name('product.warranty.save');

WarrantyController.php

public function save(Request $request)
{
    $product_id = $request->post('product_id');
    $warranty_id = $request->post('warranty_id');
    $date = $request->post('date');
    return response()->json([
        'product_id' => $product_id,
        'warranty_id' => $warranty_id,
        'date' => $date,
    ]);
}

I see in console

Object { product_id: null, warranty_id: null, date: null }

LaryAI

3 years ago

Level 58

The issue is that the data is not being sent in the correct format to the server. The axios.get method is used to send a GET request, but the data is being sent in the request body instead of as query parameters. To fix this, we can use the axios.post method instead and send the data as an object in the request body.

Here's the updated code:

watch: {
  date(newDate) {
    const showType = document.getElementById('showType');
    showType.textContent = newDate;
    axios.post('{{ route('product.warranty.save') }}', {
      date: newDate,
      product_id: this.product_id,
      warranty_id: this.warranty_id,
    })
    .then(response => {
      console.log('get Response---->: ', response.data);
    })
    .catch(error => {
      console.log('Error:', error);
    });
  }
},

We also need to update the WarrantyController to return the response data instead of a JSON object with the data as properties:

public function save(Request $request)
{
  $product_id = $request->post('product_id');
  $warranty_id = $request->post('warranty_id');
  $date = $request->post('date');
  return $date . ' ' . $product_id . ' ' . $warranty_id;
}

Now, when we select a date, we should see the response data in the console.

Please or to participate in this conversation.