当我用VueJS中的Fetch调用数据时，jquery不能正常工作吗？

Question

当我使用下面的代码时，Owlcarousel滑块可以正常工作。

HTML代码：

<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代码：

<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>

输出图像：(非常好！)

​

但是，当我用Fetch远程调用代码时，图像就被破坏了。

JavaScript代码：(我将滑块数组上传到api.php文件并远程调用它)。

<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>

输出图像：

​

​

据我理解，它不能呈现JQuery代码，因为它是后来添加的。不管我做了什么，我都找不到正确的路。

我还没有试过下面的代码。这件事没有发生

<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

在没有VueOwlCarousel的Vue2中使用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>

​

个人建议:不要把jQuery和Vue混为一谈。对于DOM操作，您只需要一个真实的来源。

这就是你问题的根本原因。

注意: Owl旋转木马不能用空幻灯片初始化。出于这个原因，我放置了一个v-if="slides" (或者，如果slides应该是一个数组，则是v-if="slides.length")。

另外，注意猫头鹰控制了旋转木马DOM元素，从那时起，即使您更改了幻灯片数组，它也不会对更改做出反应。如果要更新幻灯片，则需要owl实例，更改其内部幻灯片(这些幻灯片是从原始DOM构建的)，然后调用其内部.refresh()方法。