JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  {{ acf }}
  <button @click="add">
    Add
  </button>
</div>

JavaScript

new Vue({
  data() {
    return {
      acf: {
        liste_des_commandes: []
      }
    }
  },

  methods: {
    add() {
      this.acf.liste_des_commandes.push({
        type: this.acf.type == "Sous traitances" ? "Prestation" : "Article",
        reference: "",
        libelle: "",
        prix_unitaire: 0,
        quantite: 1,
        remise: 0,
        total_cout: 0,
        tva: this.testTabEtVal(this.acf.presta) ?
          this.acf.presta[0].acf.taux_de_tva : "0%",
        attributions: "", // this.testTabEtVal(this.presta) ? this.presta : "",
        origine_prix: "",
        reception: [],
        facturation: [],
        etat_reception: "Non reçu",
        etat_facturation: "Non facturé",
        index: this.acf.liste_des_commandes.length
      });
    },
    
    testTabEtVal(v) {
      return false
    }
  },

  watch: {
    acf: {
      deep: true,
      handler: function(newValue, oldValue) {
        console.log(newValue, oldValue)
        newValue.liste_des_commandes.forEach(ligne => {
          // ligne['total_ht'] = ligne['prix_unitaire'] * ligne['quantite'] * (1 - (ligne["remise"] / 100))
          this.$set(ligne, 'total_ht', ligne['prix_unitaire'] * ligne['quantite'] * (1 - (ligne["remise"] / 100)))
        })

      }
    },
  }
}).$mount('#app')