Panduan untuk menghantar prop dalam Vue

Question

Saya masih baru menggunakan Vue, jadi saya belum faham sepenuhnya logiknya lagi. Masalah saya ialah, saya mempunyai komponen tiket dan senarai tiket. Jadi apabila saya tiada dalam komponen senarai tiket saya, saya sedang mencipta beberapa data tiket dan saya mahu memaparkannya berdasarkan komponen tiket. Untuk menjadikannya lebih jelas, ini ialah komponen senarai tiket saya:

<template>
    <kelas bahagian="tiket">
        <div class="bekas">
            <div class="baris">
                <div class="col-12 col-md-3 mb-3">
                    <Tiket v-for="tiket dalam tiket" :key="ticket.id"
                </div>
            </div>
        </div>
    </section>
</template>

<skrip>
import Tiket dari './Ticket'
eksport lalai {
    komponen: {
        tiket
    },
    data() {
        kembali {
            tiket: [
                {
                    id: 0,
                    kategori: "Einzelkarte",
                    harga: "€3,50",
                    tarif: [
                        "Wählen Sie eine Option",
                        "Erwachsene",
                        "Erwachsener erm.",
                        "Kinder / Jugendliche",
                        "Kinder / Jugendliche erm.",
                    ],
                    jumlah_tersedia: 23,
                    nombor_artikel: "2021.05.04-2673990197-1",
                },
            ],
        };
    },
}
</script>

Terdapat juga komponen tiket:

<template>
  <jenis widget="tiket" class="--flex-column">
    <div class="atas --flex-column">
      <div class="bandname -bold">Ghost Tikus</div>
      <div class="nama lawatan">Lawatan Rumah</div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png"
      <div class="deetz --flex-row-j!sb">
        <div class="acara --flex-column">
          <div class="tarikh">3 Mac 2017</div>
          <div class="lokasi -bold">Bloomington, Indiana</div>
        </div>
        <div class="harga --flex-column">
          <div class="label">Harga</div>
          <div class="cost -bold">€{{ ticket.price }}</div>
        </div>
      </div>
    </div>
    <div class="rip"></div>
    <div class="bawah --flex-row-j!sb">
      <a class="butang btn" href="#">TAMBAHKAN KE CARTA</a>
    </div>
  </widget>



</template>

<skrip>
eksport lalai {
  alat peraga: ['tiket'],
}
</skrip>


<skop gaya>
@import 'https://i.koya.io/flex/1.1.0.css';

*, ::selepas sebelum {
   saiz kotak: tidak ditetapkan;
}
</style>

Jadi, saya memaparkan komponen TicketList dalam halaman, tetapi masalahnya ialah ia tidak memaparkan apa-apa. Jadi saya ingin tahu cara menyambungkannya bersama-sama dan memaparkan data tiket berdasarkan komponen tiket. Saya harap saya menjelaskannya, jika tidak saya boleh menjawab anda dalam komen.

Answer 1

Masalahnya ialah nama prop, anda perlu ticket作为props传递，而不是product

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

Atau tetapkan dalam komponen Ticket anda:

props: ['product']