Vue & Vuex getter array filter causes error online only

Question

I can't get the frontend to render my computed property. Whatever I tried the last days, it fails.locally everything renders fine, online I get the error. Anyone ever had this issue? it seems u can't make a getter based on another getter with array.filter !?

Vuex index.js

    state: {
    posts: [],
},

my getters

  posts: state => state.posts,
postsNews: state => {
    return state.posts.filter(post => post.category.description === 'News').slice(0, 3);
},

computed

 computed: {
    ...mapGetters(['postsNews', 'posts']),

the frontend

       <div v-if="posts && posts.length" class="hidden md:flex  flex-wrap -mx-2    mt-5">
                <div class="flex flex-wrap">
                    <ArtikelCard class="cursor-pointer w-1/2"
                                 v-for="(post, index) in postsNews" :key="index"
                                 :post="post"/>
                </div>
            </div>

my mutation:

   [SET_POSTS] (state, payload) {

    state.posts = payload;
},

my action

    getPosts ({ commit, getters }, payload = '') {
    commit(TOGGLE_LOADER, { condition: true });

    axios.get(`${API}/posts/paginated?${payload}`, headers(getters))
        .then(response => {
            commit(SET_POSTS, response.data.data);
            console.log(response.data.data);

        }).catch(error => {
        unauthenticated(error.response.status, commit);
        commit(TOGGLE_LOADER, { condition: false });
        consoleDev('getPosts', error);
    })
        .finally(() => commit(TOGGLE_LOADER, { condition: false }));
},

the error ...

chunk-vendors.433933fc.js:7 TypeError: Cannot read property 'description' of null
at app.9a6615b5.js:1
at Array.filter (<anonymous>)
at postsNews (app.9a6615b5.js:1)
at O.t._wrappedGetters.<computed>.t._wrappedGetters.<computed> (chunk-vendors.433933fc.js:13)
at kr.<anonymous> (chunk-vendors.433933fc.js:13)
at nr.get (chunk-vendors.433933fc.js:7)
at nr.evaluate (chunk-vendors.433933fc.js:7)
at kr.postsNews (chunk-vendors.433933fc.js:7)
at Object.get [as postsNews] (chunk-vendors.433933fc.js:13)
at a.n.<computed> (chunk-vendors.433933fc.js:13)

The error tells you that post.category returns null: are you sure state.posts is an array of objects, which in turn contains a property/key called category? If it is being populated by a call to an endpoint/API, inspect that it is indeed returning the expected payload. — Terry
it seems u can't make a getter based on another getter with array.filter - you can. Whatever the problem is, it originates in a place where posts is assigned, not in the code you posted. — Estus Flask
Please look at the additional output information in the original post — apollobln

apollobln apollobln · Accepted Answer · 2020-04-14T18:51:24

Locally it works - console

(35) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]

Console output locally

  {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Pt]

0: id: (...) file: (...) file_type: (...) file_conversions: (...) title: (...) slug: (...) text: (...) preview_text: (...) external_link: (...) author: (...) category: Object id: (...) description: "Software" slug: (...) constant: (...) color_code: (...)

but online it doesn't -thats why im so annoyed. can't find the issue unless I deploy to staging:

chunk-vendors.433933fc.js:7 TypeError: Cannot read property 'description' of null
at app.eea11d3b.js:1
at Array.filter (<anonymous>)
at postsNews (app.eea11d3b.js:1)
at O.t._wrappedGetters.<computed>.t._wrappedGetters.<computed> (chunk-vendors.433933fc.js:13)
at kr.<anonymous> (chunk-vendors.433933fc.js:13)
at nr.get (chunk-vendors.433933fc.js:7)
at nr.evaluate (chunk-vendors.433933fc.js:7)
at kr.postsNews (chunk-vendors.433933fc.js:7)
at Object.get [as postsNews] (chunk-vendors.433933fc.js:13)
at a.n.<computed> (chunk-vendors.433933fc.js:13)

Vue & Vuex getter array filter causes error online only

1 Answers