VueJS Маршрутизация того же компонента, который не запускает карусель OWL

Sletheren спросил: 28 марта 2018 в 03:51 в: javascript

Здравствуйте,

Я столкнулся с этой проблемой при переоценке изображений, визуализированных VueJS, в плагин карусели (OwlCarousel) при загрузке одного и того же компонента с различными переменными

проблема заключается в загрузке страницы с изображениями, все работает хорошо, а карусель может отображать изображения, но при нажатии на ссылку, чтобы перейти к тому же компоненту с другими изображениями, карусель показывает только пустой ящик.

Вот что я до сих пор:

<template>
    <div>
        <div id="owl-work">
            <div class="item" v-for="image in project.images" :key="image.id">
                <figure><img :src="'uploads/'+image.url" alt=""></figure>
            </div>
        </div>
        <div class="similars" v-for="similar in similars">
            <router-link :key="$route.fullPath" :to="{ name: 'project', params: { id: similar.id, project:similar }}" replace>
                <h4>{{similar.title}}</h4>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
    props: ["id"],
    computed: {
        ...mapGetters(['getProject', 'getSimilars']),
        project() {
            return this.getProject(this.id)
        },
        similars() {
            return this.getSimilars(this.id)
        }    }
}
$("#owl-work").owlCarousel();
</script>

и мои маршруты выглядят так:

[
  {name: 'projects', path: '/projects', component: ProjectsScreen},
  {name: 'project', path: '/project/:id', component: ProjectScreen, props: true},
]

Итак, вопрос заключается в том, как загрузить "аналогичное" изображение проекта в карусель при нажатии на <router-link>, который выводит результаты в те же компоненты.

PS: другие поля изменены и когда он избавляется от карусели, он работает, поэтому он определен с настройкой самой карусели с тем, как VueJS занимается маршрутизацией или что-то в этом роде.


1 ответ

acdcjunior ответил: 28 марта 2018 в 04:58

Переместите инициализацию совы в ловушку жизненного цикла, чтобы она снова выполнялась при изменении маршрута:

<script>
export default {
    props: ["id"],
    computed: {
        ...mapGetters(['getProject', 'getSimilars']),
        project() {
            return this.getProject(this.id)
        },
        similars() {
            return this.getSimilars(this.id)
        }    },
    mounted() {
        $("#owl-work").owlCarousel();
    }
}
// Removed from here
</script>

Или, еще лучше, удалите необходимость доступа из id и используйте вместо него ref.

<template>
    <div>
        <div ref="owlwork">
            <div class="item" v-for="image in project.images" :key="image.id">
                <figure><img :src="'uploads/'+image.url" alt=""></figure>
            </div>
        </div>
        <div class="similars" v-for="similar in similars">
            <router-link :key="$route.fullPath" :to="{ name: 'project', params: { id: similar.id, project:similar }}" replace>
                <h4>{{similar.title}}</h4>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
    props: ["id"],
    computed: {
        ...mapGetters(['getProject', 'getSimilars']),
        project() {
            return this.getProject(this.id)
        },
        similars() {
            return this.getSimilars(this.id)
        }    },    mounted() {
        $(this.$refs.owlwork).owlCarousel();
    }
}
// Removed from here
</script>
Sletheren ответил: 29 марта 2018 в 10:54
не работает так же, теперь при загрузке представления, карусель совы вообще не работает, а при переходе к другой статье ничего не отображается