<template>
    <div>
      <h1>Ma Liste d'Objets6</h1>
      
      <!-- Formulaire pour ajouter un nouvel objet -->
      <form @submit.prevent="add">
        <label for="nom">Nom de l'objet:</label>
        <input type="text" id="nom" v-model="vente.nom" required>
        
        <label for="image">Image de l'objet:</label>
        <input type="file" id="image" ref="imageInput" @change="onfilselected" accept="image/*" required>
        
        <button type="submit">Ajouter</button>
      </form>
      
      <!-- Liste des objets existants -->
      <ul>
        <li v-for="objet in carts" :key="objet.id">
          <h2>{{ objet.nom }}</h2>
          <img :src="objet.image" width="100">
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        carts: [], // Tableau pour stocker les objets
        vente: { nom: '', image: '' }, // Objet pour stocker les données du nouvel objet
      };
    },
    methods: {
      add() {
        // Générer un identifiant unique pour chaque objet (facultatif)
        const id = Date.now();
        
      
        // Ajouter l'objet à la liste
        this.carts.push(
            {
                id: id,
          nom: this.vente.nom,
          image: this.vente.image,
            }
        );
        
        // Réinitialiser le formulaire
        this.vente.nom = '';
        this.vente.image = '';
        this.$refs.vente.value = ''; // Effacer la sélection du fichier
      },
      onfilselected() {
        const file = this.$refs.imageInput.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.vente.image = e.target.result;
          };
          reader.readAsDataURL(file);
        }
      },
    },
  };
  </script>
  