Невозможно разрешить tour.next() работать с пользовательским элементом в компоненте vue

Я наконец-то завершил свое приложение, используя laravel и vue.js, и теперь я пытаюсь настроить Bootstrap Tour, чтобы пользователи могли понять, что и как они могут сделать, но у меня возникла проблема с тем, что я не справился с этой задачей. Итак, я настроил экземпляр Boosttrap Tour в своем блейд-представлении, где я получил компонент vue.

@auth
    @extends ('layouts.app')
@section('content')
    <head>
    </head>
    <div  class="container-fluid" id="bladeContainVue">
        <list-medias id="mediasList" :sessions="{{ $allUserSessions }}" :filtersession="{{ json_encode($filterSession) }}" ></list-medias>
    </div>
    <script>

        window.onload = function () {
            // jQuery and everything else is loaded
            // Instance the tour
            var tour = new Tour({
                storage: null,
                steps: [
                    {
                        element: "#mediasList",
                        title: "Your medias",
                        content: "Here we are. Take a look on this page."
                    },
                    {
                        element: ".pendingTour:first",
                        title: "Pending eggs",
                        content: "All the eggs of the chicken are golden."
                    },
                    {
                        element: ".pendingTour:first",
                        reflex: true,
                        title: "Pending eggs/2",
                        content: "Click on colorTheEgg "
                    },
                    {
                        element: "#colorTheEgg",
                        reflex: true,
                        title: "Pending eggs preview",
                        content: ""
                    },

                ]});


            // Initialize the tour
            tour.init();
            // Start the tour
            tour.start();
        }

    </script>


    @endsection
@endauth`

Теперь моя цель - позволить перейти к следующему этапу начальной загрузки, когда пользователь нажимает кнопку, которая перенаправляет на дочерний компонент Vue, но я не могу заставить его работать. <img src="/ViewY.png" class="img-fluid inspectElement" v-on:click="openEggManager(userEgg); tour.next(); ">

Если я попробую с tour.next(); или же Tour.next(), Я получаю "тур не определен" в консоли, если я делаю _this.next(); Я не получил ошибку, но это не перейти к следующему шагу...

Я не очень хорош в JS, я надеюсь, что есть кто-то, кто может подсказать мне, как достичь этой цели.

Источник

1 ответ

В конце я решил сам, используя:

// Initialize the tour
            tour.init();
            window.theTourIhave =  tour.start();

и вызов его в дочернем компоненте так:

                    window.theTourIhave.showStep(3);

или же

                window.theTourIhave.next();

Я надеюсь, что это может кому-то помочь!

Источник
Другие вопросы по тегам