Инициализировать слайдер swiper во Vue.js

149

08 марта 2022, 01:00

Как при получении результата в методе getUser() переинициализировать swiper?

<template>
    <div class="dating">
        <div class="container">
            <div class="dating_cards">
                <ul class="dating_cards--wrapp">
                    <li v-if="users.length > 0" v-for="(user,index) in users" :data-partner-id="user.id">
                        <div class="data--user__header">
                            <p class="username">{{user.fullname}}, {{user.age}} </p>
                        </div>
                        <div class="dating--user_img dating__img">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide dating__slide is-verified"   data-verif-text="Фото проверено">
                                        <img alt="avatar" :src="'/storage/'+user.avatar">
                                    </div>
                                    <div class="swiper-slide dating__slide is-verified"  v-for="image in user.images"  data-verif-text="Фото проверено">
                                        <img alt="avatar" :src="'/storage/'+image.path+image.image">
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dating__navigation" v-if="not_user === 0">
            <div class="container">
                <div class="dating__keyboards--box">
                    <div class="dating__keyboards-item">
                        <div class="icon--key">
                            <svg><use xlink:href="#left__arrow"></use></svg>
                        </div>
                        <span>Не нравиться</span>
                    </div>
                    <div class="dating__keyboards-item">
                        <div class="icon--key">
                            Пробел
                        </div>
                        <span>Следующее фото</span>
                    </div>
                    <div class="dating__keyboards-item">
                        <div class="icon--key">
                            <svg><use xlink:href="#right__arrow"></use></svg>
                        </div>
                        <span>Нравиться</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "Dating",
        data: function() {
            return {
                min: 18,
                max: 35,
                users: [],
                attribute: [],
                images: [],

            }
        },
        mounted(){
            this.getUser();
        },
        methods: {
            getUser(){
                axios.post('/dating/search',{min:this.min, max: this.max})
                    .then((response) => {
                            this.users = response.data
                    })
                    .catch(error => {});
            },
        }
    }
</script>

Answer 1

Попробуйте сделать так, или создавать экземпляр Swiper в методах, и через вызов метода инициализировать его.

import Swiper from 'swiper/js/swiper.esm.bundle'; 
 
const swiper = new Swiper('.swiper-container', { 
  // ... 
}); 
 
export default { 
  name: "Dating", 
  data: function() { 
    return { 
      min: 18, 
      max: 35, 
      users: [], 
      attribute: [], 
      images: [], 
    } 
  }, 
  mounted() { 
    this.getUser(); 
  }, 
  methods: { 
    getUser() { 
      axios.post('/dating/search', { 
          min: this.min, 
          max: this.max 
        }) 
        .then((response) => { 
          this.users = response.data 
          swiper.init(); // <---- 
        }) 
        .catch(error => {}); 
    }, 
  } 
};