Vue JS 组件重新附加或缓存答案

【问题标题】：Vue JS Component reattach or CacheVue JS 组件重新附加或缓存
【发布时间】：2017-04-26 19:49:23
【问题描述】：

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

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

<template>
    <div class="global-wrapper clearfix ">
        <keep-alive>
            <Carousel></Carousel>
        </keep-alive>
 //The rest of the code which is just importing the Component

【问题讨论】：

您是否尝试不使用keep-alive 选项？如果它渲染一次并且不再渲染，那么很可能是keep-alive的问题
我试过没有它，但导航回来时它不会呈现
然后您需要使用vue-cli 检查this.featured 的值，以确保它具有您期望的产品数组。如果数组长度为零，那么您将看不到任何显示内容，尽管组件可能会被渲染。
第一次访问页面时，网络选项卡显示作为响应，组件获得了应有的对象数组。导航到另一个页面并返回，第二次发出请求并获得一组对象。所以没有“缺乏数据原因”不渲染。另外，即使它第二次没有获取数据，至少它会在 dom 检查器上显示 v-for 迭代周围的父元素
是的，即使没有数据，您也应该能够在 DOM 检查器中看到父元素。这似乎是路由器配置的问题。您的 Carousel 组件看起来不错。你能在 jsFiddle 中重新创建这个 bug 以便我们看看吗？

标签： vue.js vue-component vue-resource vuejs2

【解决方案1】：

我发现我做错了什么。我有一个单独的 JS/JQuery 文件，在准备好的文档上，我正在初始化一个 id #('homeCarousel').owlCarousel({}) 的猫头鹰轮播。有效的是，因为我已经引导了 owl carousel -> 在挂载的生命周期回调中，我现在将元素作为目标并将其设为 owl carousel。

【讨论】：