Vue.js发票交易，项目推送输入

Question

我正在尝试使用Vue.js进行发票交易。我的问题是：用户可能想为1个产品编写描述，或者可能想应用折扣（按要求）。我希望无论他想添加哪个项目，都能显示指定的输入。（每行只能有一个说明、折扣）

因此，按需 当您按下“描述、折扣和折扣率”按钮时，将推送相关行的输入。

非常感谢您的帮助。

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

要在按下按钮时仅显示输入框，您应该使用 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 输入框将消失。