Vue.js invoice transaction, project push input

Question

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);
        },
    },
});

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

Answer 1

To show only the input box when the button is pressed, you should use v-if and check if the key exists in the project. I'll provide an example for description but you can apply it to all input boxes you want.

So when you add a new item, do not add description like this:

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

And check if item.description exists in 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 project and set it to empty:

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

deleteDesc method will completely delete the key from the project:

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

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