How to update product records with Vue, Axios and Laravel

Question

My Vue sends a form from ant-design with axios put method when I check the response in database the value is null I've tried several attempt to pass the right parameter to no success. What is the right syntax to pass in parameter.

This is my form in Vue

<a-form :form="formEdit">
<a-input type="text" class="form-control" :value="show1prod.product_name" @input="show1prod.product_name = $event.target.value" />
<a-textarea :value="show1prod.product_description" @input="show1prod.description_name = $event.target.value" :rows="5" />
<button type="button" html-type="submit" @click="update(show1prod.id)" class="btn btn-default">Save</button>
</a-form>

This is the axios put config

import axios from 'axios'
const Api = axios.create({
  baseURL: 'http://localhost:8000/api',
  withCredentials: true
})

Api.defaults.withCredentials = true

export default Api
export default {
    
    update (id,product_name, product_description) {
        return Api.put('/products/update/' + id,product_name, product_description)
    }
    
}

This the script I did not include the whole export default basic this is what's inside of it

data(){
 return{
  formEdit:  {
    product_name: '',
    product_description: ''
  }
 }
},
methods(){
 update (id) {
       let product_name = this.show1prod.product_name;
       let product_description = this.show1prod.product_description;
          Products.update(id, product_name, product_description)
          .then((response) => {
            //this.product_name = response.data
            alert('success')
          })
          .catch((error) => {
            alert(error)
          })
        }
}

Here is my Laravel route and controller code

Route::put('/products/update/{id}', 'ProductsController@update');
public function update(Products $request, $id)
    {
        $id = Products::find($id);
        
        request()->validate([
            'product_name' => 'required',
            'product_description' => 'required'
        ]);
        $id->product_name = $request->product_name;
        $id->product_description = $request->product_description;
        $id->save();
        return response()->json($id);
    }

What am I missing and how to solve this?

Your form validation in Laravel is looking for product_name and product_description, but you're never sending these values to the server. Your validation is failing. Laravel will automatically determine the best response type based on the headers, and in this case it's ajax so it sends the error bag back with a 422 error code and the error messages. — Ohgodwhy
Really? I thought this code "this.formEdit.validateFields((err, values)" is handling my form values, thank you I'll try this right away — Errol Boneo
I have made the changes but still having the error, what should I include in the parameter of the method because the "form" and "data" doesn't work — Errol Boneo

squareborg squareborg · Accepted Answer · 2020-06-20T08:47:29

You are not sending the data with the put request, a simple example would look like this,

<template>
  <form @submit.prevent="submit">
      <input v-model="formEdit.product_name">
      <textarea v-model="formEdit.product_description">
  </form>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            formEdit: {
                product_name: "",
                product_description: ""
            }
        }
    },

    methods: {
        submit(){
            axios.put('/product/update', this.formEdit)
        }
    },
}
</script>

How to update product records with Vue, Axios and Laravel

1 Answers