Vue.js發票交易,專案推送輸入
P粉561749334
P粉561749334 2023-08-30 23:57:40
0
1
533
<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"> ;
<div class="col-md-2"> <輸入型別=“文字”v-model=“item.net_total”>
<div class="col-md-5"> ;
<div class="col-md-2"> <輸入類型=“文字”佔位符=“描述”>
<div class="col-md-2">
<div class="col-md-3"> <div class="input-group"> <選擇類別=“form-select-new”> <選項值=“美元”>美元</選項> <選項值=“百分比”>&</選項> </選擇> <div class="col-md-1"> <div class="col-md-2"> <div class="col-md-2"> <小時> <小時>
<button class="btn btn-warning" @click="addInvoice()">新增項目
; </節> </div></pre> </p>
1
0
0
P粉561749334
P粉561749334

全部回覆(1)
P粉421119778

要在按下按鈕時僅顯示輸入框,您應該使用 v-if 並檢查項目中是否存在該鍵。 我將為 description 提供一個範例,但您可以將其套用到所有想要的輸入框。

因此,當您新增項目時,請勿新增 description,如下所示:

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

並檢查 item.description 是否存在於 descriptioninput 中:

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

熱門專題
更多>
熱門文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板