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，如下所示：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輸入框將會消失。