Vue.js-Rechnungstransaktion, Projekt-Push-Eingabe

Question

Ich versuche, eine Rechnungstransaktion mit Vue.js durchzuführen. Meine Frage lautet: Der Benutzer möchte möglicherweise eine Beschreibung für ein Produkt schreiben oder einen Rabatt gewähren (auf Anfrage). Ich möchte, dass die angegebene Eingabe angezeigt wird, unabhängig davon, welches Element hinzugefügt werden soll. (Jede Zeile kann nur eine Beschreibung und einen Rabatt haben)

Daher auf Anfrage Wenn Sie auf die Schaltfläche „Beschreibung, Rabatt und Rabattsatz“ klicken, wird die Eingabe für die entsprechenden Zeilen übernommen.

Vielen Dank für Ihre Hilfe.

jsfiddle

const app = new Vue({
    el: „#app“,
    Daten: {
        Rechnungspositionen: [
            {
                Name: "",
                Menge: 0,
                Unit_price: 0,
                Mehrwertsteuersatz: 18,
                net_total: 0,
                Beschreibung: '',
                Rabattwert: 0,
                discount_rate:'usd'
            },
        ],
    },
    Methoden: {
        addInvoice() {
            this.invoiceItems.push({
                Name: "",
                Menge: 0,
                Unit_price: 0,
                Mehrwertsteuersatz: 18,
                net_total: 0,
                Beschreibung: '',
                Rabattwert: 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%">Stückpreis</th>
            <th style="width:15%">Mehrwertsteuersatz</th>
            <th style="width:20%">Aktion</th>
          </tr>
        </thead>
      </table>
      <div v-for="(item, index) in billItems" :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>
  </Abschnitt>
</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 输入框将消失。