Сова Карусель не работает на VUE JS с использованием цикла для класса элемента - PullRequest
Новая
       8

Сова Карусель не работает на VUE JS с использованием цикла для класса элемента

0 голосов
/ 13 декабря 2018

Я недавно начал использовать VUEJS для какой-то части моего веб-приложения.Все работало нормально, когда я использовал vue отдельно для каждого элемента, но он будет делать несколько запросов AJAX для выборки данных JSON, которые мне не нравятся, поэтому я объединил все вместе и перебрал классы для визуализации данных, но моя проблема сейчаскогда страница полностью загружена, Owl 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>
...