Here’s the topic I’m referring to: http://disq.us/p/2dfgvxp
At part 3 there’s the tutorial on how to create the dishes for each restaurant and how to display it based on the restaurants id.
I managed to display the restaurants but then when I click on a restaurant, I can’t see the dishes. For some reason everything inside the for loop in the restaurants/_id.vue doesn’t get rendered. Although, if I write any html before the for loop that does get rendered.
Here’s the code inside _id.vue :
<client-only>
<div uk-grid>
<!-- // Left card displaying dishes -->
<div class="uk-width-1-3@m">
<h1>testing content</h1>
<div
v-for="dish in restaurant.dishes"
v-bind:key="dish"
class="uk-margin"
>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img :src="'http://localhost:1337/' + dish.image.url" alt="" />
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">
{{ dish.name }}
<span class="uk-badge">{{ dish.price }}€</span>
</h3>
<p>{{ dish.description }}</p>
</div>
<div class="uk-card-footer">
<!-- // Doing nothing for the moment :) -->
<button class="uk-button uk-button-primary">Add to cart</button>
</div>
</div>
</div>
</div>
<!-- // Right card that will display your cart -->
<div class="uk-width-expand@m"></div>
</div>
</client-only>
And here’s the query for restaurant.gql:
query Restaurant($id: ID!) {
restaurant(id: $id) {
id
name
dishes {
id
name
description
price
image {
url
}
}
}
}
Hope this is clear enough but if it isn’t hit me up.