数据未加载

Question

我正在使用 Firebase 实时数据库加载一些数据，但我正在将数据加载到 owl 轮播中 <span> 元素的 innerHTML（“https: //unpkg.com/swiper/swiper-bundle.min.js") 仅当我单击 carousel.I 的左箭头时才加载数据测试了 <p> 元素的问题，它会立即加载我的加载代码是：

<script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
      import  {getDatabase, ref, child, get , onValue} from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
    
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
        //config
      };
      const span = document.getElementById("12")
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      
      

      const dbRef = ref(getDatabase());
      get(child(dbRef, 'people/1')).then((snapshot) => {
        if (snapshot.exists()) {
          span.innerHTML = snapshot.val()
          console.log(snapshot.val());
        } else {
          console.log("No data available");
        }
      }).catch((error) => {
        console.error(error);
      });

      

     
    </script>

我的 owl 轮播代码是：

<script>
     
        var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    </script>

Answer 1

似乎 loop:true 弄乱了我的代码

数据未加载

Data not loading

html

javascript

firebase-realtime-database