Vue Vuetify Invoice Calculator
<template>
<v-container fluid>
<v-row class="mt-10">
<v-col cols="12" md="6">
<h4>
Company Name
</h4>
<p>
Street Address<br />
City<br />
Phone<br />
</p>
<h6 class="light-blue py-1 mt-9 pl-2 mr-10">BILL TO</h6>
<p>
Name:<br />
Company Name:<br />
Street Address:<br />
City:<br />
Phone:<br />
Email Address:<br />
</p>
</v-col>
<v-col cols="12" md="6">
<h2>
Invoice
</h2>
<h6 class="mt-5">
<v-layout row wrap>
<v-flex xs5 class="light-blue py-1">
<span>INVOICE</span><br />
</v-flex>
<v-flex xs5 class="light-blue py-1">
<span>DATE</span><br />
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs5>
<span>001</span>
</v-flex>
<v-flex xs5>
<span>14-05-2021</span>
</v-flex>
</v-layout>
<v-layout row wrap class="mt-9">
<v-flex xs5 class="light-blue py-1">
<span>CUSTOMER ID</span><br />
</v-flex>
<v-flex xs5 class="light-blue py-1">
<span>TERMS</span><br />
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs5>
<span>C-001</span>
</v-flex>
<v-flex xs5>
<span>Due Before Payment</span>
</v-flex>
</v-layout>
</h6>
</v-col>
</v-row>
<div v-for="(itemRow, i) in itemRows" :key="i">
<v-row align="center">
<v-col cols="12" sm="5" md="5">
<v-text-field
label="Item"
placeholder="Item"
v-model="item[i]"
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="2" md="2">
<v-text-field
label="Price"
placeholder="Price"
v-model="price[i]"
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="2" md="2">
<v-text-field
label="Qty"
placeholder="Qty"
v-model="qty[i]"
@blur="calcTotal(i)"
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="2" md="2">
<v-text-field
label="Total(₹)"
placeholder="Total(₹)"
type="number"
readonly
v-model="total[i]"
@focus="calcTotal(i)"
@blur="calcTotal(i)"
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="1" md="1">
<v-icon medium color="red darken-1" @click="removeItem(i)"
>mdi-delete</v-icon
>
</v-col>
</v-row>
</div>
<v-btn @click="addItem" class="primary">+ Items</v-btn>
<div class="float-right mt-12">
<div class="text--primary font-weight-bold">
<span class="float-left mr-4">Sub Total Amount:</span>
<span class="float-right">1000</span>
<br />
<span class="float-left mr-4">Tax Rate:</span>
<span class="float-right">18%</span>
<br />
<span class="float-left mr-4">Tax:</span>
<span class="float-right">18</span>
<br />
<span class="float-left mr-4">Total:</span>
<span class="float-right">{{ gtotal }}</span>
<br />
<br />
</div>
</div>
</v-container>
</template>
<script>
export default {
components: {},
created() {
this.addItem();
},
data: () => ({
itemRows: [],
item: [],
qty: [],
price: [],
total: [],
gtotal: '',
}),
methods: {
calcTotal(i) {
let price = this.price[i];
let qty = this.qty[i];
let total = price * qty;
this.total[i] = parseInt(total);
this.gtotal = parseInt(total);
console.log("Inside Calc Total: " + this.total[i]);
},
addItem() {
this.itemRows.push({
item: "",
qty: "",
price: "",
total: "",
});
},
removeItem(index) {
this.itemRows.splice(index, 1);
},
},
};
</script>