Laravel 5 无法让tour.next（）处理vue组件中的自定义元素_Laravel 5_Vue.js_Bootstrap Tour

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

laravel-5 vue.js

Laravel 5 无法让tour.next（）处理vue组件中的自定义元素,laravel-5,vue.js,bootstrap-tour,Laravel 5,Vue.js,Bootstrap Tour,我终于用laravel和vue.js完成了我的应用程序，现在我正试图建立一个引导程序，让用户了解他们可以做什么和如何做，但从yestaerdy开始，我就遇到了一个头疼的问题。因此，我在blade视图中设置了一个引导程序实例，从中获得了vue组件` @auth @extends ('layouts.app') @section('content') <head> </head> <div class="container-fluid

我终于用laravel和vue.js完成了我的应用程序，现在我正试图建立一个引导程序，让用户了解他们可以做什么和如何做，但从yestaerdy开始，我就遇到了一个头疼的问题。因此，我在blade视图中设置了一个引导程序实例，从中获得了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`

@auth
@扩展（'layouts.app'）
@节（“内容”）
window.onload=函数（）{
//jQuery和其他所有内容都已加载
//举例说明这次旅行
var tour=新的tour({
存储：空，
步骤：[
{
元素：“#媒体列表”，
标题：“你的媒体”，
内容：“我们到了。请看这一页。”
},
{
元素：“.pendingTour:第一”，
标题：“待定蛋”，
内容：“所有的鸡蛋都是金黄色的。”
},
{
元素：“.pendingTour:第一”，
反射：是的，
标题：“待定蛋/2”，
内容：“点击colorTheEgg”
},
{
元素：“#colorTheEgg”，
反射：是的，
标题：“挂起的鸡蛋预览”，
内容：“”
},
]});
//初始化巡更
tour.init（）；
//开始旅行
tour.start（）；
}
@端部
@endauth`

现在，我的目标是，当用户单击重定向到子Vue组件的按钮时，让它进入引导程序的下一步，但我无法管理它工作。

>
如果我尝试使用tour.next（）
或Tour.next（），
我在控制台中得到“Tour是未定义的”，如果我这样做\u this.next（）我没有错误，但它不会进入下一步
我一点也不擅长JS，我希望有人能给我一个如何实现这个目标的提示
 最后，我用以下方法自己解决了问题：
// Initialize the tour
            tour.init();
            window.theTourIhave =  tour.start();

在子组件中调用它，如下所示：
                    window.theTourIhave.showStep(3);

或
我希望它能帮助别人
                window.theTourIhave.next();