P粉4211197782023-08-31 15:02:18
要在按下按钮时仅显示输入框，您应该使用 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 输入框将消失。