vuejs invoice transactions, input item push - vue.js

Question

I am trying to make invoice transactions with vue js. my question is; The user may want to write a description for 1 product or may want to apply a discount. (BY REQUEST) I want the specified input to be shown whichever item he wants to add. (EVERY LINE CAN HAVE ONLY 1 EXPLANATION, DISCOUNT)
Therefore
on demand
When you press the "DESCRIPTION, DISCOUNT AND DISCOUNT RATE" buttons, the input of the relevant line will be pushed."
Thank you in advance for your help.
jsfiddle
const app = new Vue({
el: "#app",
data: {
invoiceItems: [
{
name: "",
quantity: 0,
unit_price: 0,
vat_rate: 18,
net_total: 0,
description: '',
discount_value: 0,
discount_rate:'usd'
},
],
},
methods: {
addInvoice() {
this.invoiceItems.push({
name: "",
quantity: 0,
unit_price: 0,
vat_rate: 18,
net_total: 0,
description: '',
discount_value: 0,
discount_rate:'usd'
});
},
removeIncoiceItem(index) {
this.invoiceItems.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%">Unit Price</th>
<th style="width:15%">Vat Rate</th>
<th style="width:20%">Action</th>
</tr>
</thead>
</table>
<div v-for="(item, index) in invoiceItems" :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.unit_price">
</div>
<div class="col-md-2">
<input type="text" v-model="item.net_total">
</div>
<div class="col-md-5">
<button class="btn btn-primary btn-sm">Add Description</button>
<button class="btn btn-secondary btn-sm">Add Discount</button>
<button class="btn btn-warning btn-sm">Add discount rate</button>
<button class="btn btn-danger btn-sm" #click="removeIncoiceItem(index)">X</button>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-md-2">
<input type="text" placeholder="description">
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm">Delete Desc.</button>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" placeholder="discount_value">
<select class="form-select-new">
<option value="dollar">USD</option>
<option value="percent">&</option>
</select>
</div>
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-sm">Delete Disc.</button>
</div>
<div class="col-md-2">
<input type="text" placeholder="discount rate">
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm">Delete discount rate</button>
</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

To show the input only when you press a button you should use v-if and check if the key exist on the item.
I will show you an example for description but you can apply it to all the inputs you want.
So when you add new item, add it without description like so:
methods: {
addInvoice() {
this.invoiceItems.push({
name: "",
quantity: 0,
unit_price: 0,
vat_rate: 18,
net_total: 0,
});
},
},
And check if item.description exists on the input of description:
<div class="col-md-2">
<input type="text" v-if="item.description !== undefined" v-model="item.description" placeholder="description"> </div>
...
<button class="btn btn-primary btn-sm" #click="addDesc(index)" >Add Description</button>
...
<div class="col-md-2">
<button class="btn btn-danger btn-sm" #click="deleteDesc(index)" >Delete Desc.</button>
</div>
The addDesc method will add the key to the item and set it as empty:
addDesc(index){
Vue.set(this.invoiceItems[index], "description", "");
}
The deleteDesc method will remove the key entirely from the item:
deleteDesc(index){
Vue.delete(this.invoiceItems[index], "description");
}
Now when you click on add description button - the description input will appear, and when you click delete description button - the description input will disappear.