Transaction de facture Vue.js, entrée push du projet

Question

J'essaie d'effectuer une transaction de facture à l'aide de Vue.js. Ma question est la suivante : l'utilisateur peut souhaiter rédiger une description pour 1 produit ou souhaiter appliquer une réduction (sur demande). Je souhaite que l'entrée spécifiée apparaisse quel que soit l'élément qu'il souhaite ajouter. (Chaque ligne ne peut avoir qu'une seule description, remise)

Par conséquent, sur demande Lorsque vous appuyez sur le bouton « Description, remise et taux de remise », la saisie des lignes concernées sera poussée.

Merci beaucoup pour votre aide.

jsfiddle

const app = new Vue({
    el : "#app",
    données: {
        éléments de facture : [
            {
                nom: "",
                quantité: 0,
                prix unitaire : 0,
                taux de TVA : 18,
                total_net : 0,
                description: '',
                valeur_de réduction : 0,
                discount_rate : « USD »
            },
        ],
    },
    méthodes : {
        addInvoice() {
            this.invoiceItems.push({
                nom: "",
                quantité: 0,
                prix unitaire : 0,
                taux de TVA : 18,
                total_net : 0,
                description: '',
                valeur_de réduction : 0,
                discount_rate : « USD »
            });
        },
        supprimerIncoiceItem(index) {
            this.invoiceItems.splice(index, 1);
        },
    },
});</pré>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css " rel="feuille de style">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <section class="conteneur">
    <div class="ligne">
      <table class="table">
        <thead class="thead-dark">
          <tr>
            <th style="width:17%">Nom</th>
            <th style="width:14%">Prix unitaire</th>
            <th style="width:15%">Taux de TVA</th>
            <th style="largeur:20%">Action</th>
          ≪/tr>
        ≪/tête>
      </tableau>
      <div v-for="(article, index) dans billItems" :key="index" style="margin-bottom: 10px">
        <div class="ligne">
          <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="pourcentage">&</option>
                </sélectionner>
              </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()"> 添加项目</bouton>
      </div>
    </div>
  </section>
</div>

Answer 1

Pour afficher uniquement la zone de saisie lorsque vous appuyez sur le bouton, vous devez utiliser v-if et vérifier si la clé existe dans le projet. Je vais vous donner un exemple pour description mais vous pouvez l'appliquer à n'importe quelle zone de saisie de votre choix.

Donc, lorsque vous ajoutez un nouvel article, n'ajoutez pas de description comme ceci :

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

Et vérifiez si item.description existe dans l'entrée de 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> 

La méthode

addDesc ajoutera la clé au projet et la définira vide :

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

La méthode

deleteDesc supprimera complètement la clé du projet :

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

Maintenant, lorsque vous cliquez sur le bouton ajouter une description, la zone de saisie add description 按钮时，description 输入框将出现，当您点击 delete description 按钮时，description apparaîtra, et lorsque vous cliquez sur le bouton supprimer la description, la zone de saisie

disparaîtra. 🎜