Hello
I am currently experiencing an issue with VueJS rendering images into a Carousel plugin (OwlCarousel) when loading the same component with different variables.
When initially loading the page with images, everything functions correctly and the carousel displays the images. However, upon clicking a link to navigate to the same component with different images, the carousel only shows an empty box.
Below is the code snippet I have implemented:
<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>
My routes are defined as follows:
[
{name: 'projects', path: '/projects', component: ProjectsScreen},
{name: 'project', path: '/project/:id', component: ProjectScreen, props: true},
]
My question is how can I ensure that the "similar" project image loads into the carousel when clicking on the <router-link>, producing the desired results within the same component?
PS: After changing some other fields and removing the carousel, everything functions properly, indicating that the issue lies with the setup of the carousel itself or how VueJS interacts with routing mechanisms.