Dynamically add items from input with show vuejs

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.