如何在 javascript 中定義'swiper' object？

Question

我試圖在我的 HTML 頁面上顯示水平時間線。 我在網上找到了這個模板，可以在其中滾動時間線。 但是，當我嘗試打開頁面時，我在控制台中收到以下錯誤“ReferenceError: Swiper not defined”，並且無法滾動時間線。 我該如何解決？ 下面是我的代碼。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
    const data = [{
            dateLabel: 'January 2017',
            title: 'Gathering Information'
        },
        {
            dateLabel: 'February 2017',
            title: 'Planning'
        },
        {
            dateLabel: 'March 2017',
            title: 'Design'
        },
        {
            dateLabel: 'April 2017',
            title: 'Content Writing and Assembly'
        },
        {
            dateLabel: 'May 2017',
            title: 'Coding'
        },
        {
            dateLabel: 'June 2017',
            title: 'Testing, Review & Launch'
        },
        {
            dateLabel: 'July 2017',
            title: 'Maintenance'
        }
    ];

    new Vue({
        el: '#app',
        data: {
            steps: data,
        },
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                paginationClickable: true,
                grabCursor: true,
                paginationClickable: true,
                nextButton: '.next-slide',
                prevButton: '.prev-slide',
            });
        }
    })
</script>

Answer 1

這里的錯誤

“ReferenceError：[在此處插入任何內容] 未定義”

意味着尚未定義您嘗試引用的任何內容，並且瀏覽器引擎無法將其識別為本機 object

Swiper 不是 Chrome 或 Firefox 與生俱來的

嘗試刪除頁面頂部的 VueJS CDN 鏈接，你會得到同樣的 vue 錯誤，所以....

像使用 Vue 一樣包含 Swiper 庫

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4=" crossorigin="anonymous"></script>

如果您很好奇，這里就是定義 Swiper 變量的地方