Vuex获取axios的循环id

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在同一元素上，因此用<div>包裹了<slide>