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

问题描述

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

标签： javascriptvue.jsowl-carousel

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

问题描述

解决方案

推荐阅读