Can't display children content type in Nuxt

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 :

go back
<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.

Hi @AlexCFurtuna,

Not sure if you’re experiencing an issue with Strapi or VueJS. Anyway, does the request for dishes return a 200 status code ? Are you able to see the dishes list through the network console ?

Also, I see that you’re binding the entire dish object as key, I would recommend to use the id property that should be in the object. (ie: :key="dish.id").

Regards

Noted. I’ve updated the key.

In terms of the request for the dishes, no, I can’t see the dishes in the console but instead I’m getting this: debug POST /graphql (38 ms) 200

So the request sends an empty response, right ? Have you published your models in Starpi Admin ?

Yes, it’s empty but, If I do that in the admin I get the response with all the dishes. I even tried to modify the restaurant.gql to

query Dishes {
dishes {
name
description
image {
url
}
}
}

and to inject them in Nuxt and it works. The only problem is that those dishes made for a specific restaurant are getting injected in all the restaurants. The model seems to be fine, might be a problem with the query for not parsing the restaurant.dishes at all?

Solved! After hours of frustration I managed to figure this out. The dishes were not assigned upon creation in Strapi to which restaurant they belong. #rookiemistake

2 Likes