Incrémenter une variable à chaque action JavaScript Résolu

Question

Bonjour à tous ! Je développe un générateur de devis et facture en PHP et JavaScript. Le PHP me permet de générer un PDF et d'enregistrer dans la BDD ce dernier. Le JavaScript me permet de calculer les prix TTC, prix total, ect. en dynamique (AJAX / Vu.js). J'ai mis en place un script JS de façon a pouvoir ajouté des lignes permettant d'ajouté un produit au devis ou à la facture. Tout cela est fonctionnel, cependant, de la façon que j'ai codé, le "name" des input est à chaque fois le même, ce qui rend impossible la récupération des données en PHP. Voici mon code : HTML :

Description	Qte	Prix unitaire	Total HT	Total TTC	Actions
		€	€	€	Ajouter Supprimer
				Total TTC	€

JS : var name=0; new Vue({ el: "#app", data: { rows: [{ quantity: 0, price: 0, amount: 0 }], total: 0 }, methods: { add(index) { this.rows.splice(index + 1, 0, { quantity: 0, price: 0, amount: 0, }) }, del(index) { this.rows.splice(index, 1) } }, watch: { rows: { handler() { this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100) this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100 }, deep: true } } }) Lors du clique sur "ajouter", le JS ajoute une ligne mais copie le name de tous les input, à savoir qte[0], prixuni[0], etc. J'aimerais qu'à chaque ajout de ligne, le name devienne qte[1], prixuni[1], ... puis qte[2], prixuni[2], ... si on ajoute une troisième ligne. Merci d'avance pou vos réponses !

forum92 · Answer

Bonjour,
Si tu souhaites un tableau qui s'incrémente, il faut une variable : exemple:


//pour un tableau associatif 
$tab1=  array("blablaKey"=>"blablaValue", ...);
foreach( $tab1 as $ligne){
    echo " <td><input name=' ".$ligne.' " ... ></td>";
}

//ou un tableau normal avec un for
for($i = 0, $i < $tab1.lengh , $i++){
 
    echo " <td><input name=' ".$tab1[i].' " ... ></td>";
}

tout dépend de ce que contienne tes tableaux .
tu as l'air d'avoir beaucoup de tableau , je te conseillerai donc si tu travail en php objet de crée un objet contenant toutes ces caractéristiques . Sinon u for simple serait plus adapté , je pense.

jordane45 · Answer

Bonjour,

Pourquoi ne pas simplement laisser le code gérer les index de tes name ?
Juste en écrivant :

    <tr v-for="(row, index) in rows">
        <td><textarea name="description[]" value="" /> </textarea></td>
      <td><input name="qte[]" class="text-right" type="text" v-model="row.quantity"></td>
      <td><input name="prixuni[]" class="text-right" type="text" v-model="row.price"> €</td>
      <td><input name="prixht[]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><input name="prixttc[]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><a href="#!" @click.prevent="add(index)">Ajouter</a> <a href="#!" @click.prevent="del(index)">Supprimer</a>
      </td>
   </tr>

Sinon... tu peux toujours essayer de les mettre à jour via du code...
(je n'ai pas le temps de chercher.. mais tu pourrais partir sur un truc du genre )

Vue.config.debug = true

 var name=0;
 new Vue({
  el: "#app",
   data: {
  rows: [{
   quantity: 0,
    price: 0,
    amount: 0
  }],
  total: 0
   },
   methods: {
    updateRowNames(row){
        console.log(row);
        //la suite du code ici...        
    }, 
  add(index) {
   this.rows.splice(index + 1, 0, {
   quantity: 0,
   price: 0,
   amount: 0,
    })
    
    this.updateRowNames(index);
  },
  del(index) {
   this.rows.splice(index, 1)
  }
   },
   watch: {
  rows: {
   handler() {
   this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100)
   this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100
    },
    deep: true
  }
   }
 })

Cordialement,
Jordane

Incrémenter une variable à chaque action JavaScript

2 réponses

Discussions similaires

Newsletters