Vue.js发票交易，项目推送输入

Question

<p>我正在尝试使用Vue.js进行发票交易。我的问题是：用户可能想为1个产品编写描述，或者可能想应用折扣（按要求）。我希望无论他想添加哪个项目，都能显示指定的输入。（每行只能有一个说明、折扣）</p> <p>因此，按需 当您按下“描述、折扣和折扣率”按钮时，将推送相关行的输入。</p> <p>非常感谢您的帮助。</p> <p>jsfiddle <pre class="brush:js;toolbar:false;">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); }, }, });</pre> <pre class="brush:html;toolbar:false;"><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"> ;

Answer 1

要在按下按钮时仅显示输入框，您应该使用 v-if 并检查项目中是否存在该键。 我将为 description 提供一个示例，但您可以将其应用于所有想要的输入框。

因此，当您添加新项目时，不要添加 description，如下所示：

methods: {
        addInvoice() {
            this.invoiceItems.push({
                name: "",
                quantity: 0,
                unit_price: 0,
                vat_rate: 18,
                net_total: 0,
            });
        },
    },

并检查 item.description 是否存在于 description 的 input 中：

<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> 

addDesc 方法将向项目添加该键并将其设置为空：

addDesc(index){
   Vue.set(this.invoiceItems[index], "description", "");
}

deleteDesc 方法将完全从项目中删除该键：

deleteDesc(index){
   Vue.delete(this.invoiceItems[index], "description");
}

现在，当您点击 add description 按钮时，description 输入框将出现，当您点击 delete description 按钮时，description 输入框将消失。