I finally completed my app using laravel and vue.js and now I'm trying to set up a Bootstrap Tour to let the users understand what and how they can do, but I'm having a problem breaking my head since yestaerdy. So, I set up a bootstrap tour instance in my blade view where I got the vue component `
@auth
@extends ('layouts.app')
@section('content')
<head>
</head>
<div class="container-fluid" id="bladeContainVue">
<list-medias id="mediasList" :sessions="" :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`
Now what my aim is to let pass to the next step of the bootstrap tour when the user click on the button that redirect to a child Vue component, but I can't manange it to work. <img src="/ViewY.png" class="img-fluid inspectElement" v-on:click="openEggManager(userEgg); tour.next(); ">
If I try with tour.next(); or Tour.next(), I get "tour is undefined" in console, if I do _this.next(); I got no error but it doesen't go to the next step...
I'm not good at all in JS, I hope there's somebody that can give me a hint on how to achieve this goal.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire