当我在 VueJS 中使用 Fetch 调用数据时，jquery 无法正常工作？

Question

Owlcarousel-slider works fine when I use below code.

HTML Code:

<div class="banner">
          <div class="main-banner owl-carousel" id="homeage-data">
            <div class="item" v-for="slider in sliders">
              <div v-bind:class="slider.class_type"> <img v-bind:src="slider.image_src" alt="Electrro">
                <div class="banner-detail">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-3 col-3" v-if="slider.align_right"></div>
                      <div class="col-md-9 col-8">
                        <div class="banner-detail-inner"> 
                          <span class="slogan">{{ slider.label }}</span>
                          <h1 class="banner-title" v-html="slider.banner_title"></h1>
                          <span class="offer">{{ slider.banner_desc }}</span>
                        </div>
                        <a class="btn btn-color big" v-bind:href="slider.button_link" v-if="slider.button_np" target="_blank">{{ slider.button_text }}</a>
                        <a class="btn btn-color big" v-bind:href="slider.button_link" v-else-if="!slider.button_np">{{ slider.button_text }}</a>
                      </div>
                      <div class="col-md-3 col-4" v-if="!slider.align_right"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

JavaScript Code:

<script>
    new Vue({
        el: '#homeage-data',
        data: {
            sliders: [
                {
                    "label": "Discover",
                    "banner_title": "Top Branded for <br>headphone",
                    "banner_desc": "best selling, and popular.",
                    "image_src": "images/banner1.jpg",
                    "button_text": "Shop Now!",
                    "button_link": "#link",
                    "class_type" : "banner-1",
                    "button_np": true,
                    "align_right": false
                },
                {
                    "label": "curved tv",
                    "banner_title": "Get latest TV models",
                    "banner_desc": "Get the top brands for TV",
                    "image_src": "images/banner2.jpg",
                    "button_text": "Shop Now!",
                    "button_link": "#link",
                    "class_type" : "banner-2",
                    "button_np": false,
                    "align_right": true
                },
                {
                    "label": "Premium",
                    "banner_title": "drone cameras",
                    "banner_desc": "The latest camera up to 30% off",
                    "image_src": "images/banner3.jpg",
                    "button_text": "Shop Now!",
                    "button_link": "#link",
                    "class_type" : "banner-3",
                    "button_np": true,
                    "align_right": false
                }
            ]
        },
        
        });
</script>

Output Image: (Very Nice )

But when I call the code remotely with Fetch, the image is broken.

JavaScript Code: (I uploaded the slider array to the api.php file and called it remotely.)

<script>
    new Vue({
        el: '#homeage-data',
        data: {
            sliders: [
            ]
        },
        created() {
            fetch("/api/api.php")
                .then((response) => { return response.json() })
                .then((response) => { 
                    this.sliders = response.sliders;
                }); 
            }
        });
</script>

Output Image:

As I understand it, it cannot render JQuery code because it was added later. No matter what I did, I couldn't find the right way.

I have not tried the code below. It didn't happen:(

<script>
    new Vue({
        el: '#homeage-data',
        data: {
            sliders: [
            ]
        },
        created() {
            fetch("/api/api.php")
                .then((response) => { return response.json() })
                .then((response) => { 
                    this.sliders = response.sliders;  
                });
                $(".main-banner, #client").owlCarousel({
                    //navigation : true,  Show next and prev buttons
                    items: 1,
                    nav: true,
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    loop:true,
                    autoPlay: false,
                    dots: true,
                    singleItem:true,
                    nav:true
                });
            }
        });
</script>

Answer 1

Demo of using VueOwlCarousel in Vue2, without npm :

 Vue.use(VueOwlCarousel); new Vue({ el: '#app', data: () => ({ slides: 0, options: { autoplay: true, autoplaySpeed: 800, autoplayTimeout: 1800, lazyLoad: true, autoplayHoverPause: true } }), mounted() { setTimeout(() => { this.slides = 7 }, 2000) }, })

 div.owl-carousel { width: 400px; height: 180px; }.owl-stage-outer { height: 111px; }.loader { height: 180px; display: flex; align-items: center; width: 400px; justify-content: center; } h2 { color: #ddd; } body { height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; }

 <script src="https://v2.vuejs.org/js/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-owl-carousel@2.0.3/dist/vue-owl-carousel.min.js"></script> <div id="app"> <vue-owl-carousel:items="1" v-if="slides" v-bind="options"> <img v-for="s in slides":key="s":src="`https://placeimg.com/400/111/any?${s}`"> </vue-owl-carousel> <div v-else class="loader"> <h2>Loading...</h2> </div> </div>

---

Personal advice: do not mix jQuery with Vue. You only want one source of truth for your DOM manipulations.

That's the underlying cause of your issue.

---

Note: Owl carousel can't be initialised with empty slides. For this reason, I've placed a v-if="slides" (or, if slides would have been an array, v-if="slides.length" ).
Also note Owl takes control over the carousel DOM element and, from that moment on, even if you change the slides array, it won't react to the change. If you wanted to update the slides, you'd need the owl instance, change its internal slides (which are built from the original DOM) and then call its internal .refresh() method.