I'm trying to do an invoice transaction using Vue.js. My question is: User may want to write description for 1 product or may want to apply discount (on request). I want the specified input to show up no matter which item he wants to add. (Each line can only have one description, discount)
Therefore, on demand When you press the "Description, Discount and Discount Rate" button, the input for the relevant rows will be pushed.
Thank you very much for your help.
jsfiddle
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); }, }, });
Name Unit Price Vat Rate Action
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
To show only the input box when the button is pressed, you should use
v-ifand check if the key exists in the project. I'll provide an example fordescriptionbut you can apply it to all input boxes you want.So when you add a new item, do not add
descriptionlike this:methods: { addInvoice() { this.invoiceItems.push({ name: "", quantity: 0, unit_price: 0, vat_rate: 18, net_total: 0, }); }, },And check if
Theitem.descriptionexists ininputofdescription:addDescmethod will add the key to the project and set it to empty:addDesc(index){ Vue.set(this.invoiceItems[index], "description", ""); }deleteDescmethod will completely delete the key from the project:deleteDesc(index){ Vue.delete(this.invoiceItems[index], "description"); }Now, when you click the
add descriptionbutton, thedescriptioninput box will appear, and when you click thedelete descriptionbutton, thedescriptionThe input box will disappear.