Javascript Vuex获取到axios的循环id

我在从for循环获取id然后将其插入axios时遇到问题。我会给你一个样品

这是我的密码

<ul v-for="post in posts" :key="post.id">
    <li><h1>{{ post.name}} </h1></li>
      <slide v-for="(lesson, index) in lesson1" :key="index">
        <img :src="lesson.image_url">
      </slide>
    </li>
</ul>

 computed: {
    ...mapState('Gallery', ['posts',
                            'lesson1',
                            ]), 
      },
created() {
    this.$store.dispatch('Gallery/loadPosts');
    this.$store.dispatch('Gallery/loadLesson1',[1]);
}

我想在for循环中获取id，然后将其存储在第一课中，然后它将根据id post获取第一课的数据。例如，我有10篇文章，然后我将获得文章的10个ID，然后根据文章ID显示课程。请帮忙，谢谢

示例输出：

   post 1
     img1, img2, img3,  img4, img5
   post 2
     img6, img7, img8, img9, img10, img11, img12
   post 3,
     img13, img14, img15
   post 4,
     img16
   post 5,
     img17, img18, img19, img20

就像netflix画廊一样

请帮忙，谢谢

建议在

getter/computed

中基于

id

进行

映射
在

注意：Vue不允许您将
v-for
和
v-if
放在同一个元素上，因此，请使用
包装
，高v-if正在工作，但图库设计将不起作用。我会试试你的。我希望它能起作用。感谢老师没有理解你的意思，[1]请澄清你的意思：画廊是设计行不通的吗？我以前试过v-if。但画廊的设计是垂直的。它应该是水平的。我将使用你说的getter。我仍将使用此。$store.dispatch（'Gallery/loadLesson1'，[1]）；？嗨，请帮我完成你的getter代码。感谢您可以使用CSS/flex box将图库的设计更改为水平，并附上一个相同的示例：
   post 1
     img1, img2, img3,  img4, img5
   post 2
     img6, img7, img8, img9, img10, img11, img12
   post 3,
     img13, img14, img15
   post 4,
     img16
   post 5,
     img17, img18, img19, img20

// vuex
getters: {
 getPosts: state => {
  return state.posts.map(post => {
   let lesson = state.lesson1.find(lesson => lesson.id == post.id)
   return { ...lesson, ...post }
  })
 }
}

// template
<ul v-for="post in posts" :key="post.id">
 <li>
  <h1>{{ post.name}}</h1>
  <slide><img :src="post.image_url"></slide>
 </li>
</ul>

// script
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters(['getPosts']) // After mapping the getter, you can use `getPosts` in your template
 }
}

// template
<ul v-for="post in posts" :key="post.id">
 <li>
  <h1>{{ post.name}} </h1>
  <template v-for="(lesson, index) in lesson1" :key="index" class="parent">
   <slide v-if="post.id == lesson.id" class="child"> <-- here
    <img :src="lesson.image_url">
   </slide>
  </template>
 </li>
</ul>