Issue trying to show grouped array length

Posted 6 months ago by Gabotronix

Hi, I have a component where I display all posts grouped by creation date, by months. For each of the twelve months I want to show next to it the total ammount of posts published that month, however I'm getting posts[index] is undefined error.

The posts are being correctly displayed and grouped by month but I can't see the posts by month coun...

This is my component:

<template>
<div class="sidebar_posts_maincontainer">
    <span class="aside_title">Historial 2018</span>
    <div class="sidebar_posts_container" v-for="(posts, month, index) in postsByMonth" :key="index">
        <div class="sidebar_posts_month_container" @click="selectPost(index)">
            <span class="sidebar_posts_month_text">{{ month }}</span>
            <i class="sidebar_posts_month_icon fa fa-angle-down"></i>
            <span class="sidebar_posts_month_count">({{ posts[index].length }})</span>
        </div>
        <div class="sidebar_posts_month_links_container" :class="{'selected_post': activePost === index}">
            <a class="sidebar_posts_month_link" v-for="post in posts" :key="post.id" :href="'/'+post.slug">
                <span class="sidebar_posts_month_link_text">•{{ post.title }}</span>
            </a>
        </div>
    </div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import axios from 'axios';
export default
{
name: 'PostsByMonthList',

props: ['category'],

data: function () {
    return {
        activePost: null,
    }
},

computed: {
    ...mapState('Posts', ['posts']),
    ...mapGetters('Posts', ['postsByMonth']),
},

mounted () {
    console.log(this.$options.name+' component successfully mounted');
    if(this.category) this.getPostsByCategory(this.category);
    else this.fetchAllPosts();
},

methods:{
    ...mapActions('Posts', ['fetchAllPosts', 'getPostsByCategory']),
    
    selectPost(index){
        this.activePost = index;
    }
  
}

}
</script>
<!--STYLES-->
<style scoped>
</style>

This is my vuex modeule where I group the posts by month:

import axios from 'axios';
import _ from 'lodash';
//STATE
const state = {
    posts: [],
    postcategories: [],
    relatedPosts: [],
    categoryPosts: [],
    loadingStatus:0,
    
}

//GETTERS
const getters = {

    
    postsByMonth: (state) => {
        let months = { Enero:[], Febrero:[], Marzo:[], Abril:[], Mayo:[], Junio:[], Julio:[], Agosto:[], Septiembre:[], Octubre:[], Noviembre:[], Diciembre:[] }
        
        _.forEach(state.posts, function (post) {
            let month = _.upperFirst(Vue.moment(post.created_at).format('MMMM'));

            months[month].push(post);
        });
        
        return months
    },
    
}

For some reason posts.[index].length is not working

https://i.imgur.com/TYh6BJf.png

That is what I'm seeing, I want the three to be the real number of posts

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.