[Vuejs]-Vuejs invoice transactions, input item push

by

0👍

To show the input only when you press a button you should use v-if and check if the key exist on the item.
I will show you an example for description but you can apply it to all the inputs you want.

So when you add new item, add it without description like so:


methods: {
        addInvoice() {
            this.invoiceItems.push({
                name: "",
                quantity: 0,
                unit_price: 0,
                vat_rate: 18,
                net_total: 0,
            });
        },
    },

And check if item.description exists on the input of description:


<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>

The addDesc method will add the key to the item and set it as empty:

addDesc(index){
   Vue.set(this.invoiceItems[index], "description", "");
}

The deleteDesc method will remove the key entirely from the item:

deleteDesc(index){
   Vue.delete(this.invoiceItems[index], "description");
}

Now when you click on add description button – the description input will appear, and when you click delete description button – the description input will disappear.

Leave a comment