Question

我终于使用laravel和vue.js完成了我的应用程序，现在我试图建立一个Bootstrap Tour，以使用户了解他们可以做什么以及如何做，但是自从yestaerdy以来，我遇到了一个困扰我的问题。因此，我在刀片视图中设置了一个引导浏览实例，在其中获得了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一点都不擅长，我希望有人可以给我一些提示，说明如何实现此目标。

Answer 1

最后，我自己通过使用以下方法解决了问题：

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

并在子组件中调用它，如下所示：

                    window.theTourIhave.showStep(3);

或

                window.theTourIhave.next();

我希望它可以帮助某人！

无法让tour.next（）处理Vue组件中的自定义元素

1 个答案: