Add binding to card components to display data correctly

Update various HTML templates to use Vue.js binding syntax (':') for passing data to custom components like `c-park_card` and `c-ride_card`, resolving issues with data not being displayed.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/0bdea3fb-49ea-4863-b501-fa6f5af0cbf0/DkyJkDK
This commit is contained in:
pac7
2025-09-22 15:03:15 +00:00
parent 331329d1ec
commit b8891fc65f
7 changed files with 10 additions and 10 deletions

View File

@@ -72,7 +72,7 @@
</h2>
<div class="space-y-4">
{% for park in popular_parks %}
<c-park_card park=park view_mode="grid" class="h-48" />
<c-park_card :park="park" view_mode="grid" class="h-48" />
{% empty %}
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
<div class="mb-4 text-4xl">🎢</div>
@@ -90,7 +90,7 @@
</h2>
<div class="space-y-4">
{% for ride in popular_rides %}
<c-ride_card ride=ride class="h-48" url_variant="park" />
<c-ride_card :ride="ride" class="h-48" url_variant="park" />
{% empty %}
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
<div class="mb-4 text-4xl">🎠</div>
@@ -110,10 +110,10 @@
{% for item in highest_rated %}
{% if item.park %}
<!-- This is a ride -->
<c-ride_card ride=item class="h-48" url_variant="park" />
<c-ride_card :ride="item" class="h-48" url_variant="park" />
{% else %}
<!-- This is a park -->
<c-park_card park=item view_mode="grid" class="h-48" />
<c-park_card :park="item" view_mode="grid" class="h-48" />
{% endif %}
{% empty %}
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">