Vue中的道具發送指南
P粉166675898
2023-08-31 00:28:33
<p>我在Vue中還是新手,所以還沒有完全理解邏輯。我的問題是,我有一個ticket和ticketlist組件。所以當我不在我的ticket list組件時,我正在創建一些tickets數據,並且我想根據ticket組件顯示它們。為了更清楚,這是我的ticketlist組件:</p>
<pre class="brush:php;toolbar:false;"><template>
<section class="tickets">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 mb-3">
<Ticket v-for="ticket in tickets" :key="ticket.id" :product="ticket"/>
</div>
</div>
</div>
</section>
</template>
<script>
import Ticket from './Ticket'
export default {
components: {
Ticket
},
data() {
return {
tickets: [
{
id: 0,
category: "Einzelkarte",
price: "€3,50",
tariff: [
"Wählen Sie eine Option",
"Erwachsene",
"Erwachsener erm.",
"Kinder / Jugendliche",
"Kinder / Jugendliche erm.",
],
available_amount: 23,
article_number: "2021.05.04-2673990197-1",
},
],
};
},
}
</script></pre>
<p>還有ticket組件:</p>
<pre class="brush:php;toolbar:false;"><template>
<widget type="ticket" class="--flex-column">
<div class="top --flex-column">
<div class="bandname -bold">Ghost Mice</div>
<div class="tourname">Home Tour</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">3rd March 2017</div>
<div class="location -bold">Bloomington, Indiana</div>
</div>
<div class="price --flex-column">
<div class="label">Price</div>
<div class="cost -bold">€{{ ticket.price }}</div>
</div>
</div>
</div>
<div class="rip"></div>
<div class="bottom --flex-row-j!sb">
<a class="btn button" href="#">ADD TO CART</a>
</div>
</widget>
</template>
<script>
export default {
props: ['ticket'],
}
</script>
<style scoped>
@import 'https://i.koya.io/flex/1.1.0.css';
*, ::after, ::before {
box-sizing: unset;
}
</style></pre>
<p>所以,我在一個頁面中顯示TicketList元件,但問題是它沒有顯示任何內容。所以我想知道如何將它們連接在一起,並根據ticket組件顯示tickets數據。我希望我表達清楚了,如果沒有,我可以在評論中回答你。 </p>
問題在於props的名稱,你需要將
#ticket
當作props傳遞,而不是product
或在你的
Ticket
元件內設定: