<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">
<input type="text" v-model="item.unit_price">
</div>
<div class="col-md-2">
<input type="text" v-model="item.net_total">
</div>
<div class="col-md-5">
<button class="btn btn-primary btn-sm">添加描述</button>
<button class="btn btn-secondary btn-sm">添加折扣</button>
<button class="btn btn-warning btn-sm">添加折扣率</button>
<button class="btn btn-danger btn-sm" @click="removeIncoiceItem(index)">X</button>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-md-2">
<input type="text" placeholder="描述">
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm">删除描述</button>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" placeholder="折扣值">
<select class="form-select-new">
<option value="dollar">美元</option>
<option value="percent">&</option>
</select>
</div>
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-sm">删除折扣</button>
</div>
<div class="col-md-2">
<input type="text" placeholder="折扣率">
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm">删除折扣率</button>
</div>
</div>
</div>
<hr>
</div>
<hr>
<div style="margin-top:10px">
<button class="btn btn-warning" @click="addInvoice()"> 添加项目</button>
</div>
</div>
</section>
</div></pre>
</p>
1
841
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
要在按下按钮时仅显示输入框，您应该使用
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输入框将消失。