Question

导航后，VueJS组件不会被缓存或至少重新附加。在刷新或启动时，所有内容都会附加并呈现良好，但在导航到另一个页面后再返回。在我的情况下，第一个组件 - Carousel - 组件不会被渲染但是API调用已经完成。

UNION

`

<template>
<div class="rel">
    <div id="homeCarousel" class="owl-carousel owl-slider">
        <div class="item" v-for="product in featured">
            <div class="bg-holder top-area-half" >
                <div class="bg-mask-lighten"></div>
                <img class="bg-img" v-bind:src="product.feature_image_url">
                <div class="hero-caption">
                    <div class="container">
                        <h3 class="hero-title">{{product.feature_title}}</h3>
                        <p class="hero-subtitle">{{product.feature_subtitle}}</p>
                        <a class="btn btn-white btn-ghost btn-lg hero-btn" href="#">Shop now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="hero-slider-nav" class="hero-slider-nav">
        <div class="container">
            <div class="pull-right"></div>
        </div>
    </div>
</div>
</template>
<style>

</style>
<script>
export default{
    data(){
        return{
            featured:[]
        }
    },
    ready(){

    },
    mounted(){
        this.getFeaturedProducts();
    },
    components:{

    },
    methods: {
        getFeaturedProducts: function () {
            Vue.http.get('/api/product/filter/featured=1').then(
                (response) => {
                    this.featured = response.body;
                }
            )
        }
    }

}
</script>

Answer 1

我发现了我做错了什么。我有一个单独的JS / JQuery文件，在准备文件时我正在通过id #('homeCarousel').owlCarousel({})初始化一个猫头鹰轮播。有用的是，因为我已经自制了猫头鹰旋转木马 - ＆gt;在已安装的生命周期回调中，我现在将该元素作为目标并使其成为猫头鹰旋转木马。

Vue JS组件重新附加或缓存

1 个答案: