Vue中的道具發送指南
P粉166675898
P粉166675898 2023-08-31 00:28:33
0
1
461
<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>
P粉166675898
P粉166675898

全部回覆(1)
P粉925239921

問題在於props的名稱,你需要將ticket當作props傳遞,而不是product

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

或在你的Ticket元件內設定:

props: ['product']
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板