mercredi 3 mars 2021

How to add condition before running v-tour in Vue.js?

In my application, I am using Laravel for backend and Vue.js for the Front-end. I used vue-tour to have a guided tour for the users and put it in the create. Everything is working but I have some condition that needs to be invoked before running the v-tour.

Vue

myTour: {
    onFinish: this.onFinishTour,
    onSkip: this.onSkipTour
},
steps: [
    {
        target: '.v-step-tour-0',
        header: {
            title: 'Main Details',
        },
        content: `Fill up with the appropriate details.`,
        params: {
            placement: 'top'
        }
    },
    <!-- WANT TO PUT SOME CONDITION BEFORE THIS APPEARS -->
    {
        target: '.v-step-tour-1',
        header: {
            title: 'Create a Other Receivable - Add Configurations',
        },
        content: `Click to create additional configurations.`,
        params: {
            placement: 'top'
        }
    }
],

Question: How can I make a condition before the v-tour appears?

EDITED:

What I mean in some condition, when the user clicked the button this tour will appear

Vue

{
    target: '.v-step-other-receivables-6',
    header: {
        title: 'Create a Other Receivable - Entries',
    },
    content: `Here's the list of your entries`,
    params: {
        placement: 'top'
    },
    before(type) {
      return new Promise((resolve, reject) => {
         if(this.generate_entries == true)
         {
            
         }
      });
    }
}


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire