<template>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">Système d'ajout avec code-barres</div>
  
            <div class="card-body">
              <label for="barcodeInput">Entrer code-barres</label>
              <input
                type="text"
                id="barcodeInput"
                v-model="currentBarcode"
                @keyup.enter="addBarcode"
                class="form-control"
                placeholder="Scannez ou entrez un code-barres"
              />
  
              <table class="table mt-3">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Code-barres</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(barcode, index) in barcodes" :key="index">
                    <th scope="row">{{ index + 1 }}</th>
                    <td>{{ barcode }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        currentBarcode: "", // Stocke le code-barres actuellement saisi
        barcodes: [] // Liste des codes-barres ajoutés
      };
    },
    methods: {
      addBarcode() {
        if (this.currentBarcode.trim() !== "") {
          this.barcodes.push(this.currentBarcode.trim()); // Ajoute le code-barres à la liste
          this.currentBarcode = ""; // Réinitialise le champ d'entrée
        }
      }
    }
  };
  </script>
  
  <style>
  /* Vous pouvez ajouter des styles ici si nécessaire */
  </style>
  