Guide pour envoyer des accessoires dans Vue

Question

Je suis encore nouveau sur Vue, donc je ne comprends pas encore complètement la logique. Mon problème est que j'ai des composants de ticket et de liste de tickets. Ainsi, lorsque je ne suis pas dans mon composant de liste de tickets, je crée des données de tickets et je souhaite les afficher en fonction du composant de ticket. Pour que ce soit plus clair, voici mon composant ticketlist :

<template>
    <section class="billets">
        <div class="conteneur">
            <div class="ligne">
                <div class="col-12 col-md-3 mb-3">
                    <Ticket v-for="ticket dans tickets" :key="ticket.id" :product="ticket"/>
                </div>
            </div>
        </div>
    ≪/section>
</modèle>

<script>
importer un ticket depuis './Ticket'
exporter par défaut {
    Composants: {
        Billet
    },
    données() {
        retour {
            des billets: [
                {
                    identifiant : 0,
                    catégorie : "Einzelkarte",
                    prix : "3,50€",
                    tarif : [
                        "Wählen Sie eine Option",
                        "Erwachsene",
                        "Erwachsener erm.",
                        "Kinder / Jugendliche",
                        "Kinder / Jugendliche erm.",
                    ],
                    montant_disponible : 23,
                    numéro_article : "2021.05.04-2673990197-1",
                },
            ],
        } ;
    },
}
</script>

Il existe également un composant ticket :

<template>
  <type de widget="ticket"class="--flex-column">
    <div class="top --flex-column">
      <div class="bandname -bold">Ghost Mice</div>
      <div class="tourname"> Visite guidée</div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png" alt="" />
      <div class="deetz --flex-row-j!sb">
        <div class="event --flex-column">
          <div class="date">3 mars 2017</div>
          <div class="location -bold">Bloomington, Indiana</div>
        </div>
        <div class="prix --flex-column">
          <div class="label">Prix</div>
          <div class="cost -bold">€{{ ticket.price }}</div>
        </div>
      </div>
    </div>
    <div class="rip"></div>
    <div class="bottom --flex-row-j!sb">
      <a class="bouton btn" href="#">AJOUTER AU PANIER</a>
    </div>
  </widget>



</modèle>

<script>
exporter par défaut {
  accessoires : ['billet'],
}
</script>


<portée du style>
@import 'https://i.koya.io/flex/1.1.0.css';

*, ::après avant {
   dimensionnement de la boîte : non défini ;
}
</style>

Donc, j'affiche le composant TicketList dans une page, mais le problème est qu'il n'affiche rien. Je veux donc savoir comment les connecter ensemble et afficher les données des tickets en fonction du composant du ticket. J'espère avoir été clair, sinon je pourrai vous répondre dans les commentaires.

Answer 1

Le problème c'est le nom des accessoires, il faut le faire ticket作为props传递，而不是product

...
   <Ticket v-for="ticket in tickets" :key="ticket.id" :ticket="ticket"/>
...

Ou définissez-le dans votre composant Ticket : 

props: ['product']