Vuex获取循环ID到axios

Question

我在从 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]);
}

然后在我的 VUEX 中

state: {
        posts: [],
        lesson1: [],
   },
mutations: {
    SET_POSTS(state, data) {
        state.posts = data;
    },
    LOAD_1(state, data) {
        state.lesson1 = data;
    }
  },

   actions: {
    loadPosts(ctx) {

        axios
            .get('/api/posts/', {

            })
            .then(res => {
                ctx.commit('SET_POSTS', res.data)
            })
     },
     loadLesson1(ctx, imgId) {

        axios.get('api/post/lesson/'+imgId, { 
        })
        .then(res => {
          var datas = res.data;
            ctx.commit('LOAD_1', datas)
        })
    },

我想在 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 画廊

请帮忙提前谢谢

Answer 1

推荐在 getter / computed 中的 id 的基础上执行 mapping 本身即。在<template>中渲染数据之前

// 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
 }
}

替代：如果id不匹配，您可以使用v-if指令来避免rendering元素。

// 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>

注意：Vue 不会让您将 v-for 和 v-if 放在同一个元素上，因此将 <slide> 包装为 <div>