javascript - VueJS路由相同的组件不触发OWL Carousel

Question

你好

我在使用不同变量加载相同组件时重新评估 VueJS 渲染的图像到 Carousel 插件 (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 如何处理路由或类似的东西是确定的..

Answer 1

将 owl 初始化移至生命周期钩子(Hook)，以便在路由更改时再次执行:

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