Issue trying to show grouped array length

Posted 1 month 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.