如何解决如何在Vue中发送道具
我对vue很陌生,所以我还没有完全理解其中的逻辑。我的问题是我有工单和工单列表组件。所以我不在我的工单列表组件中,我正在创建一些工单数据,我想根据工单组件显示它们。为了更清楚地说明这里是我的票单组件:
<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>
还有门票组件:
<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>
所以,我在其中一个页面中显示了 TicketList 组件,但问题是它没有显示任何内容。所以我想知道如何将它们连接在一起并根据票证组件显示票证数据。我希望我很清楚,但如果我不清楚,我可以在评论中回答你。
解决方法
问题在于道具名称,您需要将 ticket
作为道具传递而不是 product
...
<Ticket v-for="ticket in tickets" :key="ticket.id" :ticket="ticket"/>
...
或者相反在你的内部 Ticket
组件集:
props: ['product']
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。