Vue.js动态添加发票条目时点击显隐按钮触发所有行变更问题求解

问题原因 #

你当前定义的addAciklama、addIndirim是根实例的全局状态，所有循环渲染的发票条目行共用这两个布尔值，任意行修改状态都会触发所有行的显隐逻辑，因此会出现点击单行所有行同时展示字段的问题。

修复方案 #

将两个字段的显隐状态下沉到每个发票条目对象中，由每条数据独立管理自身的显隐状态即可。

1. 修改JS逻辑 #

const app = new Vue({
    el: '#app',
    data: {
        // 移除全局的addAciklama、addIndirim属性
        faturasections: [
            {
                name: "",
                unit_price: 0,
                net_total: 0,
                description: '',
                discount_value: '',
                // 每个条目自带独立的显隐状态，默认关闭
                showDescription: false,
                showDiscount: false
            }
        ],
    },
    methods: {
        addNewFaturaSatiri() {
            this.faturasections.push({
                name: "",
                unit_price: 0,
                net_total: 0,
                description: '',
                discount_value: '',
                // 新增条目默认也关闭显隐状态
                showDescription: false,
                showDiscount: false
            });
        },
        removeFaturaSatiri(faturasectionIndex) {
            this.faturasections.splice(faturasectionIndex, 1);
        },
    }
});

2. 修改HTML模板的对应逻辑 #

把原来引用全局addAciklama、addIndirim的位置，全部替换为当前循环项fatura自身的显隐属性即可：

<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="!fatura.showDescription" @click="fatura.showDescription = !fatura.showDescription" class="dropdown-item">description</button>
                        <!-- 改用当前条目自身的折扣字段显隐状态 -->
                        <button v-if="!fatura.showDiscount" @click="fatura.showDiscount = !fatura.showDiscount" 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="fatura.showDescription">
                        <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="fatura.showDescription = !fatura.showDescription">DELETE</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="d-flex flex-column">
                        <!-- 改用当前条目自身的折扣字段显隐状态 -->
                        <div class="row row mb-1" v-if="fatura.showDiscount">
                            <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="fatura.showDiscount = !fatura.showDiscount">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>

内容的提问来源于stack exchange，提问作者Selaminko Elam