CODEWITHSUNDEEP
javascriptvue.jsecmascript-6vuejs2vue-router
Sletheren
Sletheren

Reputation: 2486

VueJS Routing the same component not triggering OWL Carousel

Hello

I'm facing this problem with re-evaluating the images rendered by VueJS into a Carousel plugin (OwlCarousel) while loading the same component with different variables

the problem is when loading the page with images everything works well and the carousel can show the images, but when clicking on a link to go to the same component with other images, the carousel shows only an empty box.

Here is what I have so far:

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

and my routes look like:

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

So the question is how to load the "similar" project image into the carousel when clicking on the <router-link> which outputs the results in the same components.

PS: the other fields are changed, and when getting rid of the carousel it works, so its certain with the setup of the carousel itself with how VueJS deals with routing or something like that..

Upvotes: 0

Views: 794

Answers (1)

acdcjunior
acdcjunior

Reputation: 135872

Move the owl initialization to a lifecycle hook, so it is executed again when the route changes:

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

Or, better yet, remove the need for accessing from id and use a ref instead.

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

Upvotes: 1

Related Questions