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:

<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 class="sidebar_posts_month_links_container" :class="{'selected_post': activePost === index}">
            <a class="sidebar_posts_month_link" v-for="post in posts" :key="" :href="'/'+post.slug">
                <span class="sidebar_posts_month_link_text">•{{ post.title }}</span>
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.$' component successfully mounted');
    if(this.category) this.getPostsByCategory(this.category);
    else this.fetchAllPosts();

    ...mapActions('Posts', ['fetchAllPosts', 'getPostsByCategory']),
        this.activePost = index;

<style scoped>

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

import axios from 'axios';
import _ from 'lodash';
const state = {
    posts: [],
    postcategories: [],
    relatedPosts: [],
    categoryPosts: [],

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'));

        return months

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

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.