How do I make it so introjs adheres to slides?

Question

I have a modal with multiple slides in it. Each slide contains it's own form.

<v-bottom-sheet v-model="showCreateRecordModal" inset max-width="600px" class="rounded-t-xl" scrollable persistent>

    <v-card v-if="slide === 1">
        <v-btn @click="explain()">Explain Form Input</v-btn>

        <div data-intro="Hello World! " ref='input1'>
            <label class="font-weight-bold black--text" for="">Form input 1</label>
            <v-textarea
                placeholder="Describe the input1"
                required
                v-model="input1"
                rows="1"
                auto-grow
            ></v-textarea>
        </div>
    </v-card>

     <v-card v-if="slide === 2">
        <v-btn @click="explain()">Explain Form Input2</v-btn>

        <div data-intro="Hello World! " ref='input2'>
            <label class="font-weight-bold black--text" for="">Form input 2</label>
            <v-textarea
                placeholder="Describe the input2"
                required
                v-model="input2"
                rows="1"
                auto-grow
            ></v-textarea>
        </div>
    </v-card>

</v-bottom-sheet>

The problem I'm having is that I only want the tool tips to open for the slide it's on. So if I click "Explain Form Input2" button it won't open input1 tip from slide == 1

<script>

    import "intro.js/introjs.css";
    //const introJS = require("intro.js");
    export default {
        
        data() {
          return {
              slide: 1,
          }
        },
        mounted() { 
            const introJS = require("intro.js");

            this.introJS = introJS;
        },
        methods: {
            explain(){
               this.introJS().setOptions({
                   steps: [
                        {
                            element: this.$refs.input1,
                            intro: 'Tooltip has position right',
                            position: 'top'
                        },
                        {
                            element: this.$refs.input2,
                            intro: 'Tooltip has position top',
                            position: 'top'
                        }
                   ]
               }).start()
            },
        }
    }
</script>

How do I make it so the tool tips only open for the inputs that are in their slide?

score 0 · Accepted Answer · answered Feb 22 '21 at 19:14

Create a method that provides the steps for each slide:

explain(){
    this.introJS().setOptions({
        steps: this.introJsSteps()
    }).start()
},
introJsSteps(){
    let steps;
    if(this.slide === 1){
        steps = [
            {
                element: this.$refs.situation,
                intro: 'This is the situation',
                position: 'top'
            },
        ]
    } else if (this.slide === 3){
        steps = [
            {
                element: this.$refs.automatic_thoughts,
                intro: 'This is automatic thoughts',
                position: 'top'
            }
        ]
    }
    return steps
},

How do I make it so introjs adheres to slides?

1 Answers1