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>

Nima Ebrazeh · Accepted Answer · 2021-09-11 15:07:11Z

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.

answered Sep 11, 2021 at 15:07

Nima Ebrazeh

1,3266 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nima Ebrazeh Over a year ago

Example in codepen: codepen.io/nimaebrazeh/pen/JjJNZLd

Selaminko Elam Over a year ago

So how logical is that?

Nima Ebrazeh Over a year ago

Well, you use only two global parameter for knowing which item has description and discout_value. but it's obvious that each item should has it's own "addIndirim" and "addAciklama". because if we only use two parameter, when it's value change applies to all items which is not correct. but if we use "addIndirim" and "addAciklama" for each item in array, if a value for each item change it's not applied to another items.

Collectives™ on Stack Overflow

Dynamically add items from input with show vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related