Vuex получить для L oop ID в Axios - PullRequest
Новая
       14

Vuex получить для L oop ID в Axios

0 голосов
/ 21 марта 2020

У меня проблема с получением идентификатора для l oop, затем вставьте его в топор ios. я дам вам образец.

Вот мой код 

<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)
        })
    },

я хочу получить идентификатор для l oop затем сохраните его в уроке, тогда он получит данные базы урока по идентификатору. например, у меня есть 10 постов, затем я получу 10 идентификаторов постов, а затем выведу базу уроков по идентификаторам постов. Пожалуйста, помогите Спасибо заранее

Пример вывода: 

   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

Пожалуйста, помогите спасибо заранее

1 Ответ

0 голосов
/ 21 марта 2020

рекомендуется делать mapping на основе id в getter / computed самой ie. перед рендерингом данных в <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
 }
}

Альтернатива : вы можете использовать директиву v-if, чтобы избежать rendering элемента, если id не совпадает. 

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

...