vuejs invoice input binding processors - vue.js

Question

I'm trying to do invoice four, but I couldn't quite figure out how to do it.
First of all, to give an example:
Quantity 1 Unit Price 2000 Percent (18) = net total "2360".
and then if the user changes "net_total" I want the unit price to change.
Then if the user wants to apply a discount, I want it to be reflected in net_total as a percentage, or if he writes it as a currency, not a percentage. It will write net total.
const app = new Vue({
el: "#app",
data: {
invoiceItem: [
{
name: "",
quantity: 0,
unit_price: 0,
vat_rate: 18,
net_total: 0,
showDesc: false,
showDiscount: false,
description: '',
discount_value: 0,
discount_rate:'usd'
},
],
},
methods: {
addInvoice() {
this.invoiceItem.push({
name: "",
quantity: 0,
unit_price: 0,
vat_rate: 18,
net_total: 0,
showDesc: false,
showDiscount: false,
description: '',
discount_value: 0,
discount_rate:'usd'
});
},
removeIncoiceItem(index) {
this.invoiceItem.splice(index, 1);
},
},
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<section class="container">
<div class="row">
<table class="table">
<thead class="thead-dark">
<tr>
<th style="width:17%">Name</th>
<th style="width:14%">Quantity</th>
<th style="width:14%">Unit Price</th>
<th style="width:15%">Vat Rate</th>
<th style="width:14%">Net Total</th>
<th style="width:15%">Action</th>
</tr>
</thead>
</table>
<div v-for="(item, index) in invoiceItem" :key="index" style="margin-bottom: 10px">
<div class="row">
<div class="col-md-2">
<input type="text" v-model="item.name">
</div>
<div class="col-md-2">
<input type="text" v-model="item.quantity">
</div>
<div class="col-md-2">
<input type="text" v-model="item.unit_price">
</div>
<div class="col-md-1">
<select v-model="item.vat_rate">
<option value="18">%18</option>
<option value="8">%8</option>
<option value="1">%1</option>
<option value="0">%0</option>
</select>
</div>
<div class="col-md-2">
<input type="text" v-model="item.net_total">
</div>
<div class="col-md-3">
<button
class="btn btn-primary"
v-if="!item.showDesc" #click="item.showDesc = !item.showDesc">Add Description
</button>
<button
class="btn btn-secondary"
v-if="!item.showDiscount" #click="item.showDiscount = !item.showDiscount">Add Discount
</button>
<button class="btn btn-danger" #click="removeIncoiceItem(index)">X</button>
</div>
<div class="col-md-4" v-if="item.showDesc">
<input type="text" placeholder="description">
</div>
<div class="col-md-4" v-if="item.showDiscount">
<div class="input-group">
<input type="text" placeholder="discount_value">
<select class="form-select-new" v-model="item.discount_rate">
<option value="dollar">USD</option> <option value="percent">&</option>
</select>
</div>
</div>
</div>
<hr>
</div>
<hr>
<div style="margin-top:10px">
<button class="btn btn-warning" #click="addInvoice()"> Add Item</button>
</div>
</div>
</section>
</div>

Answer 1

The easiest would be to create two calculate methods, one when the net_total changed and one when one of the parameters (like the unit_price) changed. I assume your unit_price is the gross unit price.
You have to add the #change property on the inputs.
<div class="col-md-2">
<input type="text" v-model="item.unit_price" #change="changed(item)">
</div>
<!-- ... -->
<div class="col-md-2">
<input type="text" v-model="item.net_total" #change="changedTotal(item)">
</div>
<!--
Here was also the 'v-model="item.discount_value"' missing.
<input type="text" placeholder="discount_value" v-model="item.discount_value" #change="changed(item)">
-->
<!--
<input type="text" v-model="item.quantity" #change="changed(item)">
<input type="text" v-model="item.unit_price" #change="changed(item)">
<select v-model="item.vat_rate" #change="changed(item)">
<input type="text" v-model="item.net_total" #change="changedTotal(item)">
<select class="form-select-new" v-model="item.discount_rate" #change="changed(item)">
-->
An then use the following methods to calculate the gross to net and net to gross.
changed(item) {
let sum = item.quantity * item.unit_price;
if (item.discount_rate == 'percent')
sum -= sum*parseFloat((item.discount_value / 100))
else
sum -= item.discount_value
let percent = parseFloat((item.vat_rate/100)+1);
item.net_total = sum/percent;
},
changedTotal(item) {
let percent = parseFloat((item.vat_rate/100)+1);
var gross = item.net_total * percent;
if (item.discount_rate == 'percent')
gross = gross*parseFloat((item.discount_value / 100)+1)
else
gross += item.discount_value
item.unit_price = gross / item.quantity;
},
It could also be possible via the vue watchers, but I think this would be too complicated.