Bonjour.

J'ai rencontré un problème que je n'arrive pas a résoudre depuis 2 jours. J'aimerais cliquer sur le bouton sur la ligne 38, en cliquant sur le bouton en forme de flêche j'aimerais pouvoir fermer ou ouvrir le bon ID depuis une autre balise div sur Vue comment puis-je faire cela ? Car maintenant, si je cloque la flèche, il y a toutes les div qui s'ouvrent.
Je travaille avec Vue.3, et tailwind pour mon alternance.
Ma question est comment pointer le div avec le bon ID après avoir cliquer le bouton en forme de flèche ? Dois-je créer une boucle pour ensuite trouver le bon ID depuis mon API Local et ensuite comparer l'ID de l'API a l'id de ce div ? Mais comment peut on écrire "une fois que le bon ID de l'API est trouvé, on compare l'ID API au bon div" en JavaScript car je bloque et je n'avance pas du tout.

Voici la photo de ce que je veux faire et plus bas mes codes

 Ici mes codes html: Donc, j'ai déclaré @click sur la ligne 38 et j'aimerais ouvrir et fermer le div de la ligne 56 en utilisant heigh: 0px pour tout fermer

<template>
  <div>
    <div class="relative bg-white faq flex flex-wrap content-center">
      <section
        id="faq"
        class="text-black mt-10 md:my container sm:mx-10 mx-12 lg:mx-28"
      >
        <!-- bg-ray f-9 on change -->
        <div
          class="
            mb-5
            py-4
            md:py-8
            px-5
            md:px-10
            transition-colors
            duration-300
            bg-gray-100
          "
          type="button"
        >
          <p
            class="
              md:text-xl
              font-semibold
              flex
              justify-between
              cursor-pointer
              transition-all
              duration-300
            "
          >
            <span class="my-auto">
              {{ cardsinfo.title }}
            </span>
            <!-- fontawesome -rotate-180 quans s'ouvre -->
            <span class="my-auto">
              <button type="button" @click="informationOpenAndClosed($event)">
                <font-awesome-icon
                  class="
                    text-gray-400
                    transform
                    transition
                    duration-300
                    w-6
                    text-gray-a6
                    stroke-current
                  "
                  size="2x"
                  :icon="['fas', 'chevron-up']"
                />
              </button>
            </span>
          </p>
          <!-- Pour écrire l'explication -->
          <div
            id="foo"
            class="
              md:border-l-8 md:pl-6
              text-sm
              border-gray-e0
              transition-all
              duration-300
              overflow-hidden
              paragraph
            "
            :class="{
              'h-0': !view.infoOpen,
            }"
          >
            <p class="font-medium mb-1">{{ cardsinfo.reponse.reponse }}</p>
            <div>
              <p>
                {{ cardsinfo.reponse.informations.infos }}
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

Ici la partie JavaScript de mes codes sur vue.

<script>
export default {
  // eslint-disable-next-line vue/prop-name-casing
  // eslint-disable-next-line vue/require-prop-types
  props: ['cardsinfo'],
  data() {
    return {
      view: {
        infoOpen: true,
      },
    }
  },
  mounted() {
    window.addEventListener('click', this.informationOpenAndClosed)
  },
  destroyed() {
    window.removeEventListener('click', this.informationOpenAndClosed)
  },
  methods: {
    informationOpenAndClosed(event) {
      // Créer un boucle pour faire tourner les 6 id.
      // Une fois la boucle est finit, il faut comparer l'id trouver dans api a l'id de div qu'on veut cliquer.
      // Ensuite, on ouvre le div avec le bon id
      // for (let i = 0; i < this.cardsinfo; i++) {
      //   // eslint-disable-next-line prefer-const
      //   let infoId = this.cardsinfo[i]
      //   if (infoId) {
      //     // eslint-disable-next-line prefer-const
      //     let targetId = event.currentTarget.id
      //     if (targetId) {
      //       targetId = this.cardsinfo.id
      //     }
      //   }
      // }
      this.view.infoOpen = !this.view.infoOpen
      // eslint-disable-next-line no-console
      console.log(this.$refs)
    },
  },
}
</script>

Voici mon data.js ou vous pouvez voir mon API

export const cardInformation = [
  {
    id: 1,
    title: 'shoppingauto.fr, comment ça marche ?',
    reponse: {
      id: 10,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          "Acheter une auto n'aura jamais été aussi facile. Cherchez, comparez et réservez ! Dès réception de votre réservation, on se charge de finaliser votre commande à vos côtés et à 100% en digital ! 😊 ",
      },
    },
  },
  {
    id: 2,
    title: "J'aimerai avoir des infos complémentaires sur un véhicule ?",
    reponse: {
      id: 11,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          "Une question sur la finition ?  Les options ? Une trace d'usure ? Nos conseillers shoppingauto.fr vous répondent directement sur notre chat ! 😎 ",
      },
    },
  },

  {
    id: 3,
    title: 'Comment savoir combien coutera ma livraison ?',
    reponse: {
      id: 12,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          'Rien de plus simple : Une fois votre véhicule choisie, appuyez sur le bouton "je shop" et une étape plus tard on vous demandera dans quel département vous souhaitait être livré et on vous indiquera le tarif ! 🚀 ',
      },
    },
  },
  {
    id: 4,
    title: 'Comment réserver le véhicule ?',
    reponse: {
      id: 13,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          'Afin de bloquer la voiture de vos rêves, nous vous invitons à réserver le véhicule en ligne en versant un acompte de 250€, un bon de réservation vous sera transmis automatiquement par mail. ',
      },
    },
  },
  {
    id: 5,
    title: 'Comment payer le solde du véhicule ?',
    reponse: {
      id: 14,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          "Le montant de l'acompte sera enlevé du montant global et notre service administratif se chargera de vous envoyer la facture, le bon de commande et notre RIB. Pour le paiement du solde, un virement sera exigé en amont de la livraison et dès reception des fonds, la livraison pourra être effectuée.",
      },
    },
  },
  {
    id: 6,
    title: 'Que faire si le véhicule ne me convient pas ?',
    reponse: {
      id: 15,
      reponse: ' La réponse de shoppingauto.fr : ',
      informations: {
        id: 20,
        infos:
          'Pas de panique ! Vous êtes protégé avec notre garantie satisfait ou remboursé. ',
      },
    },
  },
]

Alors, je ne connais pas vue.js, mais à la lecture de ton code, je vois que tu ajoutes un eventListener sur tout le document ( lignes 14 du script ).

Le plus simple ne serait-il pas d'ajouter un eventListener sur chacune de tes divs? normalement, tu récupère l'id de l'élément cliqué avec event.target.id.
Enfin, moi c'est comme ça que je procède quand un même eventListener est appliqué à plusieurs éléments, mais que la fonction liée à cet eventListener ne doit s'appliquer qu'à l'élément sur lequel on a cliqué.

LucasWerquin a écrit:

Alors, je ne connais pas vue.js, mais à la lecture de ton code, je vois que tu ajoutes un eventListener sur tout le document ( lignes 14 du script ).

Le plus simple ne serait-il pas d'ajouter un eventListener sur chacune de tes divs? normalement, tu récupère l'id de l'élément cliqué avec event.target.id.
Enfin, moi c'est comme ça que je procède quand un même eventListener est appliqué à plusieurs éléments, mais que la fonction liée à cet eventListener ne doit s'appliquer qu'à l'élément sur lequel on a cliqué.

Ah oui, je viens de cliquer sur tous les icônes fontawesome et toues les icônes interagissent avec les div "informations" même ceux qui n'ont rien à voir, j'avais pas compris. Merci, je vais rectifier tous cela

Ben, d'après ce que j'ai compris, tu peux bien cliquer n'importe où sur la fenêtre, ça déclenche l'évènement. Donc toutes tes divs fermées vont s'ouvrir, et toutes celles qui sont ouvertes vont se fermer.

J'ai réussit. Merci pur les réponses