Question

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

Answer 1

我在猫头鹰轮播组件上使用v-for有一个类似的问题，而我如何解决这个问题是通过在每个组件的已安装生命周期挂钩上初始化轮播来解决的。如果这样不起作用，请尝试在更新的挂钩上对其进行初始化。希望对您有帮助

Owl Carousel在使用Vue js的元素类循环上不起作用

1 个答案: