Advance Vue 1

readme.md

Instruction

Create a UI and functionality based on the image below.

CSS styling does not have to be identical, but it should look nice.

Todo:

1. Use input.json as global state in vuejs (vuex optional)
2. When button "Line Item" is clicked add new empty rows to "items" global state
3. Some of the fields or text are computed (see below list)
4. Add a submit button at end, when clicked "console.log(global state)"
5. All the input form values need to live in global state

Computed property:

1. Amount in each line item
2. Subtotal
3. Total
4. Balance Due

Utilize vue cli or even a laravel application; however, ensure that a build tool is used. Finally, submit source code privately (Make sure your answer is not public)

input.json

{
	"invoice_number": null,
	"invoice_date": null,
	"invoice_terms": null,
	"po_number": null,
	"invoice_from_text": null,
	"bill_to": null,
	"ship_to": null,
	"items": [
		{"description": null, "qty": 1, "rate": 0},
		{"description": null, "qty": 1, "rate": 0},
		{"description": null, "qty": 1, "rate": 0},
	],
	"notes": null,
	"terms_and_conditions": null,
	"tax_percent": null,
	"amount_paid": 0
}