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 輸入框將會​​消失。