Блог

У меня есть веб-приложение, которое отображает сообщения в блоге в виде сетки. Но компонент BlogCards в Home.vue просто ничего не выводит, тогда как он должен выводить блоги в сеточном формате. Все данные хранятся в firebase. Если я зайду в /блоги, я смогу увидеть блоги в формате сетки, но это не работает на Home.vue. Он также выдает предупреждение Vue: свойство или метод «blogPostsCards» не определен в экземпляре, но на него ссылаются во время визуализации.

Я взял этот код из этого урока в 5:31:05 минутной отметки.
Любое решение этой проблемы.

Домой.vue

 <template>
  <div class="home">
    <BlogPost :post="post" v-for="(post, index) in blogPostsFeed" :key="index" />
    <div class="blog-card-wrap">
      <div class="container">
        <h3>View more recent blogs</h3>
        <div class="blog-cards">
          <BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import BlogPost from '../components/BlogPost.vue'
import BlogCards from '../components/BlogCards.vue'

export default {
  name: "Home",
  components: {
    BlogPost,
    BlogCards,
    Arrow
  },
  computed : {
    blogPostsCards() {
      return this.$store.getters.blogPostsCards;
    },
    blogPostsFeed() {
      return this.$store.getters.blogPostsFeed;
    },
  }
};
</script>
 

Открытки.vue

 <template>
    <div class="blog-card">
        <img :src="post.blogCoverPhoto" alt="">
        <div class="info">
            <h4>{{ post.blogTitle }}</h4>
            <h6>Posted on: {{ new Date(post.blogDate).toLocaleString('en-us', {dateStyle: "long"})}}</h6>
            <router-link class="link" to="#" >
                View Post <Arrow class="arrow" />
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "blogCard",
    props: ["post"],
    computed: {
        editPost() {
            return this.$store.state.editPost
        },
    }
}
</script>
 

И функция получения в store/index.js

 getters:{
    blogPostsFeed(state){
      return state.blogPosts.slice(0,2);
    },
    blogPostsCards(state) {
      return state.blogPosts.slice(2,6);
    },
  },
 

 
<BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />

 

В вашем домашнем.vue >>> измените >>blogPostsCard на blogPostsCards, потому что вы используете blogPostsCards в своем компьютере, поэтому он выдает вам эту ошибку.