无法让 your.next() 处理 vue 组件中的自定义元素答案

【问题标题】：Unable to let tour.next() to work on custom element in a vue component无法让 your.next() 处理 vue 组件中的自定义元素
【发布时间】：2018-08-02 18:27:29
【问题描述】：

我终于使用 laravel 和 vue.js 完成了我的应用程序，现在我正在尝试设置一个 Bootstrap 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(),，我会在控制台中看到“tour is undefined”，如果我这样做_this.next();，我没有收到错误，但它不会进入下一步......

我在 JS 方面一点儿也不擅长，希望有人可以给我一个提示，告诉我如何实现这个目标。

【问题讨论】：

标签： laravel-5 vue.js bootstrap-tour

【解决方案1】：

最后我自己解决了：

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

在子组件中调用它是这样的：

                    window.theTourIhave.showStep(3);

或

                window.theTourIhave.next();

希望对大家有所帮助！

【讨论】：