VueJS: data retrieved Uncaught (in promise) TypeError: array[0] is undefined when refreshing

Question

I'm working on a vuejs/(vuex) for state management/firebase project of posts.

So I have a firestore collection of posts (array of objects that have name id owner content and timestamp for creation ...) and when a user want to visit a single post it will redirect him to the route of the single post (..../view-post/postid).

All the posts are retrieved from the firestore using the getDocs method and it's stored on blogPosts variable...

I'm using a data and it's array that when the mounted lifecycle hook starts called currentBlog: null (when the component is mounted) i use that array and by filtering all the posts to the post id then start filling the data on the component using the array[0] like these:

async mounted() {
    this.currentBlog = await this.blogPosts.filter((post) => {
                    return post.blogID == this.$route.params.blogid;
                });
}

My html markup (template):

<section class="preview" v-if="currentBlog">
        <h2>{{ currentBlog[0].blogTitle }}</h2>
        <p>Posted on: <span>{{ dateFormat() }}</span> <span v-if="currentBlog[0].editTime">(Last edit:
                {{ editFormat() }})</span></p>
        <img class="blogCover" :src="currentBlog[0].blogCoverFileURL" :alt="currentBlog[0].blogCoverPhoto">
        <div class="html-blog" v-html="currentBlog[0].blogHTML"></div>
        <hr />
        <div class="tags">
            <h4>Tags:</h4>
            <div class="tag" v-for="(tag,index) in currentBlog[0].blogTags" @click="filterPosts(tag)" :key="index">
                {{ tag }}
            </div>
        </div>
        <hr />
</section>

I used the first condition just to assure that the post is appearing when the it completes to filter but ...

Now I got the post, the problem that I face is when I refresh the page from the post and sometimes when I open the post directly, I get this error:

Uncaught (in promise) TypeError: this.currentBlog[0] is undefined

Any method to fix these or even any suggested other methods?

Ideally, Your logic should work properly as you are filtering/getting data based on the route param. Can you check when you are refreshing, route param is available or not. — Rohìt Jíndal
– Rohìt Jíndal, Commented Sep 4, 2022 at 4:58

Marcus · Accepted Answer · 2022-09-04 02:55:05Z

1

My first thought is where do you have the function running that is getting the blogPosts with getDocs. What is likely happening is the function that fetched the blog posts can run and finish when you visit the homepage of your application, but when you try to view a post directly that function has not run yet.

I'd recommend setting a v-if on your that only resolves to true once the blog post data is fetched.

An alternative could be for you to check your Vuex store for the blog posts within the view blog post component, and if they are not there then you can just fetch them from the said component. This is likely not favorable as your entire app relies on the blog posts' data I assume.

Here is an example

I'd also note that you don't have to await the filter function, and if you just want to get a single blog post it may be helpful to create a getter that does that in your Vuex store.

answered Sep 4, 2022 at 2:55

Marcus

1421 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ALLAOUA Okba Over a year ago

i found the problem: was the new one post array is filtered before the getDoc of all the documents, however even i added the if condition, the problem it's always the same it's filtering before the data comes. that's really strange!

Penny Liu · Accepted Answer · 2023-08-07 05:10:12Z

1

What is the initial value of currentBlog? In your template you are checking whether or not it is null but if the array is empty then it will drop into the v-if condition.

your v-if should be;

v-if="currentBlog && currentBlog.length"

That will ensure [0] is present and accessible.

edited Aug 7, 2023 at 5:10

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Sep 11, 2022 at 5:32

Benjamin James Kippax

6825 silver badges16 bronze badges

Comments

ALLAOUA Okba · Accepted Answer · 2022-09-05 00:13:17Z

0

Well the only solution i found was taking the id of the blog from the route (this.$route.params.blogid) and using it to retrieve one single data from the firebase directly!

answered Sep 5, 2022 at 0:13

ALLAOUA Okba

1382 silver badges11 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

VueJS: data retrieved Uncaught (in promise) TypeError: array[0] is undefined when refreshing

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related