Post Detail

Create Project

composer create-project laravel/laravel purchase-order-vue

 Change Directory

cd purchase-order-vue

Open Project With Visual Studio Code and setup connection database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=puchase_order
DB_USERNAME=root
DB_PASSWORD=

Make Model PurchseOrder

php .\artisan make:model PurchaseOrder -m

Change Schema Table Purchase Order become 

        Schema::create('purchase_orders', function (Blueprint $table) {
            $table->id();
            $table->string('product_name');
            $table->decimal('price');
            $table->integer('qty');
            $table->timestamps();
        });

Migrate And Refresh Database 

php .\artisan migrate:refresh --seed

Create API For Consume Frontend VueJS

Create Controller Purchase Order

php .\artisan make:controller Api/PurchaseOrderController

Create Function Store In Controller Purchaase Order

    public function store(Request $request)
    {
        $status = false;

        try{
            foreach($request->purchase_order as $key => $value)
            {
                $inputData = [
                    'product_name' => $value['product_name'],
                    'qty' => $value['qty'],
                    'price' => $value['price']
                ];

                DB::table('purchase_orders')
                    ->insert($inputData);
            }
            $status = true;
            $data['message'] = 'Saved';
            $response = [
                'status' => $status,
                'data' => $data
            ];
            return response()->json($response);
        }catch(\Exception $e){
            $data['message'] = $e->getMessage();
            $response = [
                'status' => $status,
                'data' => $data
            ];
            return response()->json($response);
        }
    }

Call Controller In API Route With Method Post

Route::post('purchase-order', [PurchaseOrderController::class, 'store'])->name('purchase-order.store');

Test Controller With Tool's Postman with Sample JSON

{
    "purchase_order": [
        {
            "product_name": "Car",
            "qty": 1000,
            "price": 30000
        },
        {
            "product_name": "Motor Cycle",
            "qty": 9,
            "price": 10000
        },
        {
            "product_name": "By Cycle",
            "qty": 1000,
            "price": 90000
        }
    ]
}

Before test start artisan serve

php artisan serve

Check Route List For Make Sure, New Route Detected

php .\artisan route:list

Create Project VueJS with Vite Vuejs

https://vitejs.dev/guide/

npm create vite@latest purchase-fe-vue --template vue

And then run Project VueJS

npm create vite@latest purchase-fe-vue --template vue

Add Folder Frontend To Visual Studio Code With Add Fitur Add Work Space

Install Axios Package In Vuejs for communication REST API With Backend Laravel

npm install axios

Install SASS For Create Mockup Dynamic Form

Edit ID In Index.html and add style and then edit mount in main.js from id #app to id #pruchase-order

Create Mock In App.vue

<template>
  <div class="container">
    <h2>Dynamic Form Purchase Order <small>Please Click Add For Add New Item</small></h2>
      <button class="add-item">Add New Item</button>
    <ul class="responsive-table">
      <li class="table-header">
        <div class="col col-2">Product Name</div>
        <div class="col col-3">QTY</div>
        <div class="col col-4">Price</div>
      </li>
      <li class="table-row">
        <div class="col col-2" data-label="Product Name">
          
        </div>
        <div class="col col-3" data-label="QTY">
          
        </div>
        <div class="col col-4" data-label="Price">
          
        </div>
      </li>
    </ul>
  </div>

</template>

<style scoped lang="scss">
.add-item {
  margin: 40px;
  background: green;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 200;
  cursor: pointer;
  transition: box-shadow .4s ease;
}
.add-item:hover {
  box-shadow: 1px 1px 5px #555;
}
.add-item:active {
  box-shadow: 1px 1px 7px #222;
}


body {
  font-family: 'lato', sans-serif;
}
.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

h2 {
  font-size: 26px;
  margin: 20px 0;
  text-align: center;
  small {
    font-size: 0.5em;
  }
}

.responsive-table {
  li {
    border-radius: 3px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
  }
  .table-header {
    background-color: #95A5A6;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
  }
  .col-1 {
    flex-basis: 10%;
  }
  .col-2 {
    flex-basis: 40%;
  }
  .col-3 {
    flex-basis: 25%;
  }
  .col-4 {
    flex-basis: 25%;
  }
  
  @media all and (max-width: 767px) {
    .table-header {
      display: none;
    }
    .table-row{
      
    }
    li {
      display: block;
    }
    .col {
      
      flex-basis: 100%;
      
    }
    .col {
      display: flex;
      padding: 10px 0;
      &:before {
        color: #6C7A89;
        padding-right: 10px;
        content: attr(data-label);
        flex-basis: 50%;
        text-align: right;
      }
    }
  }
}
</style>

Check result Mockup

Add Data In App.vue With Type Data Array

<script>
  export default {
    data(){
      return {
        purchase_order: [
          {
            product_name: null,
            qty: null,
            price: null
          }
        ]
      }
    }
  }
</script>

Add V-for To Dynamic Form

Add Method Add New Item

And In method Push New Data Array