Vue でプロップを送信するためのガイド
<p>私はまだ Vue を使い始めたばかりなので、ロジックをまだ完全には理解していません。私の問題は、チケットとチケットリストのコンポーネントがあることです。そのため、チケット リスト コンポーネントを使用していないときにチケット データを作成し、チケット コンポーネントに基づいてそれらを表示したいと考えています。わかりやすくするために、これが私のチケットリストコンポーネントです: </p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<section class="チケット">
<div class="行">
<div class="col-12col-md-3mb-3""
<Ticket v-for="ticket in ticket" :key="ticket.id" :product="ticket"/>
</div>
</div>
</div>
</セクション>
</テンプレート>
<スクリプト>
「./Ticket」からチケットをインポート
デフォルトのエクスポート {
コンポーネント: {
チケット
}、
データ（） {
戻る {
チケット： [
{
ID:0、
カテゴリー: 「アインゼルカルテ」、
価格: "€3.50"、
料金表: [
「Wählen Sie eine オプション」、
「エルヴァクセン」、
「エルヴァクゼナー そうですね。」、
「キンダー / ユーゲントリッヒ」、
「キンダー / ユーゲントリッヒェーム。」、
]、
利用可能量: 23、
記事番号: "2021.05.04-2673990197-1",
}、
]、
};
}、
}
</script></pre>
<p>チケット コンポーネントもあります: </p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<ウィジェットタイプ="チケット"クラス="--flex-column">
<div class="top --flex-column">
<div class="バンド名 -bold">ゴーストマウス</div>
<div class="ツアー名">ホームツアー</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">2017 年 3 月 3 日</div>
<div class="location -bold">インディアナ州ブルーミントン</div>
</div>
<div class="price --flex-column">
<div class="label">価格</div>
<div class="cost -bold">€{{ ticket.price }}</div>
</div>
</div>
</div>
<div class="リップ"></div>
<div class="bottom --flex-row-j!sb">
<a class="btn ボタン" href="#">カートに追加</a>
</div>
</ウィジェット>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
小道具: ['チケット']、
}
</スクリプト>
<スタイルスコープ>
@import 'https://i.koya.io/flex/1.1.0.css';
*、 ：：前後に {
ボックスのサイズ設定: 未設定;
}
</style></pre>
<p>それで、ページに TicketList コンポーネントを表示していますが、問題は何も表示されないことです。そこで、それらを接続し、チケットコンポーネントに基づいてチケットデータを表示する方法を知りたいです。明確にできていれば幸いですが、そうでない場合はコメントでお答えします。 </p>
全員に返信(1)返信します
P粉9252399212023-08-31 12:58:27
問題はプロップの名前にあります。product ではなく、ticket
または、Ticket コンポーネントに設定します:
返事
0