Level 44
Should just be
posts.length
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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
Should just be
posts.length
Please or to participate in this conversation.