Vue中的道具发送指南
P粉166675898
P粉166675898 2023-08-31 00:28:33
[Vue.js讨论组]
<p>我在Vue中还是新手,所以还没有完全理解逻辑。我的问题是,我有一个ticket和ticketlist组件。所以当我不在我的ticket list组件时,我正在创建一些tickets数据,并且我想根据ticket组件显示它们。为了更清楚,这是我的ticketlist组件:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;section class=&quot;tickets&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-12 col-md-3 mb-3&quot;&gt; &lt;Ticket v-for=&quot;ticket in tickets&quot; :key=&quot;ticket.id&quot; :product=&quot;ticket&quot;/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/template&gt; &lt;script&gt; import Ticket from './Ticket' export default { components: { Ticket }, data() { return { tickets: [ { id: 0, category: &quot;Einzelkarte&quot;, price: &quot;€3,50&quot;, tariff: [ &quot;Wählen Sie eine Option&quot;, &quot;Erwachsene&quot;, &quot;Erwachsener erm.&quot;, &quot;Kinder / Jugendliche&quot;, &quot;Kinder / Jugendliche erm.&quot;, ], available_amount: 23, article_number: &quot;2021.05.04-2673990197-1&quot;, }, ], }; }, } &lt;/script&gt;</pre> <p>还有ticket组件:</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;widget type=&quot;ticket&quot; class=&quot;--flex-column&quot;&gt; &lt;div class=&quot;top --flex-column&quot;&gt; &lt;div class=&quot;bandname -bold&quot;&gt;Ghost Mice&lt;/div&gt; &lt;div class=&quot;tourname&quot;&gt;Home Tour&lt;/div&gt; &lt;img src=&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png&quot; alt=&quot;&quot; /&gt; &lt;div class=&quot;deetz --flex-row-j!sb&quot;&gt; &lt;div class=&quot;event --flex-column&quot;&gt; &lt;div class=&quot;date&quot;&gt;3rd March 2017&lt;/div&gt; &lt;div class=&quot;location -bold&quot;&gt;Bloomington, Indiana&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;price --flex-column&quot;&gt; &lt;div class=&quot;label&quot;&gt;Price&lt;/div&gt; &lt;div class=&quot;cost -bold&quot;&gt;€{{ ticket.price }}&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;rip&quot;&gt;&lt;/div&gt; &lt;div class=&quot;bottom --flex-row-j!sb&quot;&gt; &lt;a class=&quot;btn button&quot; href=&quot;#&quot;&gt;ADD TO CART&lt;/a&gt; &lt;/div&gt; &lt;/widget&gt; &lt;/template&gt; &lt;script&gt; export default { props: ['ticket'], } &lt;/script&gt; &lt;style scoped&gt; @import 'https://i.koya.io/flex/1.1.0.css'; *, ::after, ::before { box-sizing: unset; } &lt;/style&gt;</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']
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号