Vue中的道具发送指南
P粉166675898
P粉166675898 2023-08-31 00:28:33
0
1
466
<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']
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板