[Vuejs]-Lavarel & Vue e-commerce: how to post an order as array of products instead of single product

by

0👍

✅

Actually, You can achieve your goal by changing many lines of code instead of using your current code at backend (laravel Model-Controller) and frontend (Vue). I will show you how to do by adding hasMany relationship in your User model structure, then changing saving method at controller, and axios request payload. This method has limitation, you have to post an array of products of the same user ID.

  1. Add hasMany relationship in your User Model. Read this
class User extends Model
{
    //add this line
    public function order()
    {
        return $this->hasMany(Order::class);
    }
  1. Use createMany function to save multiple rows in your controller. Read this
public function store(Request $request)
    {
        //use this lines to store array of orders
        $user = Auth::user();
        $orderStored = $user->order()->createMany($request->data);

        //return your response after this line
    }
  1. Change your axios payload from vue method
data(){
    return {
        //add new key data to store array of order
        arrayOfOrders:[];
   };
},
methods:{
    placeOrder(e) {
        e.preventDefault()

        let address = this.address
        let product_id = this.product.id
        let quantity = this.quantity
        //remark these lines, change with storing to arrayOfOrders data instead of doing post request
        //axios.post('api/orders/', {address, quantity, product_id})
                //.then(response => this.$router.push('/confirmation'))

        this.arrayOfOrders.push({
            product_id:product_id,
            quantity:quantity, 
            address:address
        });
    },
    //create new function to make post request and call it from your button
    postData(){
        let instance = this;
        axios.post('api/orders/', {
            data:instance.arrayOfOrders
        }).then(response => this.$router.push('/confirmation'))
    }
}

0👍

Thank you for your answer! Just one thing is not so clear.. in my OrderController.php should the final code look something like this?

 public function store(Request $request)
    {
        $user = Auth::user();
        $order = $user->order()->createMany([
            'product_id' => $request->product_id,
            'user_id' => Auth::id(),
            'quantity' => $request->quantity,
            'address' => $request->address
        ]);

        return response()->json([
            'status' => (bool) $order,``
            'data'   => $order,
            'message' => $order ? 'Order Created!' : 'Error Creating Order'
        ]);
    }

Leave a comment