Vue.js發票交易,專案推送輸入
P粉561749334
2023-08-30 23:57:40
<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">
<輸入類型=“文字”佔位符=“描述”>
要在按下按鈕時僅顯示輸入框,您應該使用
v-if
並檢查項目中是否存在該鍵。 我將為description
提供一個範例,但您可以將其套用到所有想要的輸入框。因此,當您新增項目時,請勿新增
description
,如下所示:並檢查
item.description
是否存在於description
的input
中:addDesc
方法將向專案新增該鍵並將其設為空:deleteDesc
方法將完全從專案中刪除該鍵:現在,當您點擊
add description
按鈕時,description
輸入框將出現,當您點擊delete description
按鈕時,description
輸入框將會消失。