@Analka

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

Как при получении результата в методе getUser() переинициализировать swiper?
при выводе пользователей, например 3, когда я нажимаю Like то этот пользователь удаляется, а у следующего не работают кнопки смены слайдов

<li v-if="users.length > 0" v-for="(user,index) in users" :data-partner-id="user.id" v-bind:class="{ active: index === 0 }">
                        <div class="dating--user_img dating__img">
                            <swiper :options="swiperOption" :ref="'mySwiper_'+user.id">
                                <!-- slides -->
                                <swiper-slide>
                                    <img alt="avatar" :src="'/storage/'+user.avatar">
                                </swiper-slide>
                                <swiper-slide v-for="image in user.images">
                                    <img alt="avatar" :src="'/storage/'+image.path+image.image">
                                </swiper-slide>
                                <!-- Optional controls -->
                                <div class="swiper-pagination"  slot="pagination"></div>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                                <div class="swiper-scrollbar"   slot="scrollbar"></div>
                            </swiper>
                        </div>
                        <div class="dating--user__action" v-if="not_user === 0">
                            <div class="dating--user__back btn--round action--btn default-round default-color">
                                <svg><use xlink:href="#return"></use></svg>
                                <span class="dating-tip show-for-medium">Отменить последнее действие</span>
                            </div>
                            <div class="flex--row">
                                <div @click.prevent="Dislike(attribute.user_id)" class="dating--user__close btn--round action--btn btn--large close-round close-color">
                                    <svg><use xlink:href="#close"></use></svg>
                                </div>
                                <div @click.prevent="Like(attribute.user_id)" class="dating--user__like btn--round action--btn btn--large like-round like-color">
                                    <svg><use xlink:href="#heart"></use></svg>
                                </div>
                            </div>
                        </div>
                    </li>


import axios from 'axios';
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Dating",
        components: {
            swiper,
            swiperSlide
        },
        data: function() {
            return {
                min: 18,
                max: 35,
                users: [],
                attribute: [],
                images: [],

                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction',
                    },

                    // Navigation arrows
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // And if we need scrollbar
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                },
            }

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted(){
            this.getUser();
        },
        methods: {
            getUser(){
                axios.post('/dating/search',{min:this.min, max: this.max})
                    .then((response) => {
                            this.users = response.data;

                    })
                    .catch(error => {});
            },
            Dislike(id){
                axios.post('/dating/search/dislike',{id:id})
                    .then((response) => {
                        if (response.data.error === 0){
                            this.getUser();
                        }else{
                            toast.fire({
                                icon: 'error',
                                title: response.data.message
                            });
                        }

                    })
                    .catch(error => {});
            },
            Like(id){
                axios.post('/dating/search/like',{id:id})
                    .then((response) => {
                        if (response.data.error === 0){
                            this.swiper().init();
                        }else{
                            toast.fire({
                                icon: 'error',
                                title: response.data.message
                            });
                        }
                    })
                    .catch(error => {});
            },
        }
    }
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы