How do I then limit the returned results to just the first three (3)?
Related, my mental model around how to get values showing up in vue seems to be broken.. maybe you can clarify..
Here is the js in my RecentArticles slice below, but it gives me the warning:
Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
As you can see Im attempting to return 3 results two different ways (either using the pageSize or by running .slice)
Currently NONE of these values is showing up when I use the Vue insector and also I have no idea why my slices are all named in the Vue inspector and how to change this to match the slice name.
As you can see, no mention of my return values posts/animals/recent_posts.. Confused
I'd do that client-side, with .slice(0, 3) or something.
asyncData doesn't work in components. You'll have to use data/mounted like Vue, or else fetch that data in the actual page, and pass it through as another prop.
Thanks @marcellothearcane.
I'm feeling pretty silly now, I feel like Im missing something really obvious.
I added your code and now I'm getting this error, below.
I've followed the link and read about it in a bunch of articles and it's not coming together for me what Im doing wrong.
This is the same error I had at the start and it refers me to Vue Reactivity and suggests possibly creating an empty field in 'data'. But as Im using Nuxt there's generally nothing else referring to 'data', so I feel this is the wrong direction. Also I note your earlier comment " asyncData doesn't work in components." but am still confused as to how to implement this.
Appreciate any further insight.
Thnx
[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <RelatedArticles> at components/RelatedArticles.vue
<Post> at pages/posts/_uid.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
Thanks so much for fixing this @marcellothearcane.
Since it was inside private code, I've extracted relevant parts of the code here for anyone seeking to do the same.
The key parts were.
Create a data section with an empty "articles" array
Use async fetch to bring in the data and populate the "articles" array
Pass articles array into <article-card> with v-for defining 'article'
Within ArticleCard.vue create a prop to bring in 'article'