Dynamically add items from input with show vuejs - vue.js

Question

there was a point where I got stuck while trying to make invoice transactions with vue js, I can add a new item, it works fine, the problem starts here, when I want to show the "description" and "discount_value" that I have hidden, it adds it to all lines, not like this, whichever index button is clicked. add his item. Thank you in advance for your help.
const app = new Vue({
el: '#app',
data: {
addAciklama: false,
addIndirim: false,
faturasections: [
{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
}
],
},
methods: {
addNewFaturaSatiri() {
this.faturasections.push({
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
});
},
removeFaturaSatiri(faturasectionIndex) {
this.faturasections.splice(faturasectionIndex, 1);
},
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<section>
<div class="card-body border-bottom-light" v-for="(fatura, faturasectionIndex) in faturasections" :key="faturasectionIndex">
<div class="row">
<div class="col-sm-4 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.name" placeholder=" "/>
<label>HİZMET / ÜRÜN</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 brfiyati">
<div class="form-floating">
<input type="number" class="form-control" v-model.number="fatura.unit_price" placeholder=" "/>
<label>BR.FİYAT</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0 toplam">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.net_total" placeholder=" "/>
<label>TOPLAM</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<div class="mb-1">
<div class="mb-1">
<button v-if="!addAciklama" #click="addAciklama = !addAciklama" class="dropdown-item">description</button>
<button v-if="!addIndirim" #click="addIndirim = !addIndirim" class="dropdown-item">discount_value</button>
</div>
</div>
<button class="btn btn-icon btn-secondary" #click="removeFaturaSatiri(faturasectionIndex)">DELETE</button>
</div>
</div>
<div id="aciklamalar" class="row mt-1">
<div class="col-12 d-flex">
<div class="col-sm-6 fatura-aciklama">
<div class="row" v-if="addAciklama">
<div class="f-a">
<div class="input-group">
<span class="input-group-text kdv">AÇIKLAMA</span>
<input type="text" class="form-control" v-model="fatura.description"/>
</div>
</div>
<div class="f-b">
<button class="btn btn-icon btn-outline-secondary" #click="addAciklama = !addAciklama">DELETE</button>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="d-flex flex-column">
<div class="row row mb-1" v-if="addIndirim">
<div class="i-i">
<div class="input-group">
<span class="input-group-text kdv">İNDİRİM</span>
<input type="text" class="form-control" v-model="fatura.discount_value"/>
</div>
</div>
<div class="i-s">
<button class="btn btn-icon btn-outline-secondary" #click="addIndirim = !addIndirim">DELETE</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-outline-secondary btn-sm"
data-repeater-create #click="addNewFaturaSatiri()">
<span class="align-middle">NEW INVOICE</span>
</button>
</div>
</div>
</div>
</section>
</div>

Answer 1

addAciklama and addIndirim are global variable which is defined in data property and it's obvious that if you change them, it applies to every iteration of your v-for block and not apply for each index separately.
In order to fix this, you can move addAciklama and addIndirim into each object in faturasections:
faturasections: [{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
addIndirim: false,
addAciklama: false,
}],
Then in your template section code, you should replace all addIndirim and addAciklama to fatura.addIndirim and fatura.addAciklama. this will fix your issue.