J'ai un problème. Je viens de créer une API locale et je veux dire que si je clique sur le premier bouton, le premier identifiant sera ouvert (et fermé) et ainsi de suite. Mais, j'ai essayé pendant presque 3 heures de le faire et j'échoue parce que je ne comprends pas comment faire ça. Je sais que je dois pointer sur l'identifiant "cardinformation" lorsque je clique sur la carte pour ouvrir la bonne carte avec le bon identifiant, mais à chaque fois que je fais cela, toutes les cartes sont ouvertes ? Comment y parvenir ? Comme on peut le voir à la ligne 38, je déclare @ click = "informationOpenAndClosed", puis à la ligne 66 sur le div je déclare : class = "{'h-0':! View.infoOpen,}" pour dire si je cliquez sur ce div alors le div sera ouvert (ou fermé), puis sur la ligne 99 à l'intérieur des données j'ai déclaré infoOpen: true, avec la méthode que vous pouvez voir sur la capture d'écran, j'ai fait une API locale à l'intérieur du data.js qui vous pouvez voir sur la capture d'écran.  Ma question est la suivante : dois-je créer une boucle pour dire, puis faire une déclaration si je clique sur le div avec le bon identifiant pour ouvrir le div avec cet identifiant exact ? Mais comment puis-je faire cela ?
Voici mon HTML dans Vue.js

<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">
                <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
            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,
            }"
          >
            <!-- :class="[
              cardsinfo.reponse.indexOf(id) === cardsinfo.reponse.id
                ? 'h-0'
                : !view.infoOpen,
            ]" -->
            <!-- :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>

Voici mon script avec la méthode que je n'arrive pas à finir.

<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() {
      // for (cardsInformation of cardsinfo)
      if (this.cardsinfo.id) {
        this.view.infoOpen = !this.view.infoOpen
      }
      // eslint-disable-next-line no-console
      console.log(this.cardsinfo)
    },
  },
}
</script>

Voici mon data.js ou se trouve l'API local que j'ai fait

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é. ',
      },
    },
  },
]

 
Voici le screenshot de ce que je veux faire