Owl Carousel 在 vue js 上使用循环元素类不起作用答案

【问题标题】：Owl Carousel doesn't work on vue js using loop for element classOwl Carousel 在 vue js 上使用循环元素类不起作用
【发布时间】：2018-12-13 15:03:29
【问题描述】：

我最近开始在我的网络应用程序的某些部分使用VUEJS。当我在每个元素上分别使用 vue 时，一切正常，但它会发出多个 ajax 请求来获取我不喜欢的 json 数据，所以我将所有内容组合在一起并循环遍历类以呈现数据，但我现在的问题是当页面完全加载时Owl Carousel 仅适用于具有OwlCarouselX id 的第一个元素。请任何人帮助我，我昨天才开始使用vue。

<div id="Vue">
    <div class="RenderApplicationVueList">
        <div id="OwlCarouselX">
                <div v-for="row in store">
                    <div>{{row.name}}</div>
                </div>
            </div>
    </div>

    <div class="RenderApplicationVueList">
        <div class="OwlCarouselY">
            <div v-for="row in food">
                <div>{{row.name}}</div>
            </div>
        </div>
    </div>

    <div class="RenderApplicationVueList">
        <div class="OwlCarouselY">
            <div v-for="row in grocery">
                <div>{{row.name}}</div>
            </div>
        </div>
    </div>
</div>

我的 vue javascript 示例

<script>
const elements = document.getElementsByClassName("RenderApplicationVueList");
for (el of elements){
    new Vue({
      el: el,
      data: {
        food: [],
        grocery: [],
        store: []
      },

      methods: {
            extag: function(string){
                    var exploded = '';
                    if(string != ""){ 
                        var arrayOfTags = string.split (',');
                        for(var i=0; i < arrayOfTags.length; i++) { 
                            exploded += '<li data-value="'+ arrayOfTags[i]+'">'+ arrayOfTags[i]+'</li>';
                        }
                    }
                return  exploded;
            }
        },

        created: function() {
            fetch (ajax_appserver("mroot", "api/api_loadIndex.php?fetch_api=true&appApi=vue"))
            .then(response => response.json())
            .then(json => {
                this.food = json.food;
                this.grocery = json.grocery;
                this.store = json.store; 

               /*Render carousel*/
                Vue.nextTick(function(){
                     $('.OwlCarouselX').owlCarousel({
                        lazyLoad:true,
                        stagePadding: 50,
                        loop: false,
                        margin:15,
                        responsiveClass: true,
                        merge: false,
                        nav: false,
                        dots: false,
                        responsive:{
                            0:{items:1,},
                            600:{items:2,},
                            1000:{ items:3,}
                        }
                    });

                    $("#OwlCarouselY").owlCarousel({
                        lazyLoad:true,
                        loop:false,
                        margin:10,
                        responsiveClass:true,
                        merge:true,
                        rewindNav: false,
                        dots: false,
                        nav:false,
                        responsive:{
                            0:{items:1,},
                            600:{items:2,},
                            1000:{ items:3,}
                        }
                    });
                     $( "img.useLoadLazyImage").lazy();
                }.bind(this));
            });
        }
    });
}
</script>

【问题讨论】：

你找到解决方案了吗？

标签： javascript vue.js owl-carousel

【解决方案1】：

我在 owl carousel 组件上使用 v-for 时遇到了类似的问题，我如何通过在每个组件的已安装生命周期挂钩上初始化 carousel 来解决这个问题。如果这不起作用，请尝试在更新的钩子上初始化它。希望这会有所帮助

【讨论】：