VueJS reading $root Ajax fetched data from within router-view returns undefined only when directly navigating to url

Question

I'm learning my ways around vuejs and decide to create an eshop-like webpage for practice.

I fetch all my data in one api call and want to have access to them from all my router-views, so I can pair the category name to the rest of the data.

What I currently do is fetch all my data on the new Vue created and then access it accordingly from all the router-views with $root.

This works great except when directly navigating to the url or refreshing the page.

From what I could find, it seems the category object is not yet loaded and returns null

This is obviously a timing issue, but I have not managed to find what needs to go where...

The beforeRouteEnter was my latest attempt to fix this issue

My route

const routes = [
        { path: '/category/:category', component : category}
    ]

    const router = new VueRouter({
        mode: 'history',
        routes: routes
    })

Router View

const category = {
        template: `<div>
                    <h1>{{$route.params.category}}</h1>
                    <b>{{category}}</b>
                </div>`,
        computed: {
            vueRoot: function(){
                return this.$root;
            },
            category: function() {
                    return this.$root.categories.filter(c => c.name === this.$route.params.category)[0]
                })
            },
        }
    }

Main Vue

var app = new Vue({
        router,
        el: '#app',
        data: {
            products: {},
            groups: {},
            categories: {}
        },
        methods: {
            goBack () {
                window.history.length > 1
                ? this.$router.go(-1)
                : this.$router.push('/')
            },
            fetchProducts: function(){
                $.get("/api/fetchv2.json", function(data){
                    console.log(data);
                    app.products = data.products;
                    app.groups = data.groups;
                    app.categories = data.categories;
                }).fail(function(error) {
                    alert( "error" );
                    console.log(error);
                });
            }
        },
        created: function(){
            this.fetchProducts();
        },
        beforeRouteEnter (to, from, next) {
            this.fetchProducts();
        }
    })

Thanks in advance

Why are you initializing your data properties as objects (categories: {})? Objects do not have a filter method. — Bert
– Bert, Commented Feb 18, 2018 at 21:23
That... is a very good question... And apparently it fixed everything! Would you like adding that as an answer for me to accept? — Ant
– Ant, Commented Feb 18, 2018 at 21:28

Bert · Accepted Answer · 2018-02-18 21:31:32Z

1

The computed value in the category component is going to try to run when the category component is instantiated. Since your data is retrieved asynchronously, that means before the data is retrieved from the server, the computed will attempt to filter an empty object (because that is how categories is initialized).

Instead, initialize categories with an empty array [].

answered Feb 18, 2018 at 21:31

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

VueJS reading $root Ajax fetched data from within router-view returns undefined only when directly navigating to url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related