onFinish callback

[billmorgan123]

onFinish callback is never be called after finish the tour
version 2.0.0

[HZooly]

Do you have some code to show us?

[GeorgeBetts]

This occurs when there are hidden steps, so that the 'last' step is not actually being recognised as the last step.

For example:

<template>
  <div>
    <div id="v-step-1">Step one is visible.</div>    
    <div v-if="false" id="v-step-2">Step two is hidden! Not included in the dom with v-if</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '#v-step-1', 
            content: 'This step is the only visible step and therefore should be the final step to trigger the onFinish callback'
          },
          {
            target: '#v-step-2',
            content: 'This step is hidden and shouldn't be displayed'
          },
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>

The onFinish callback will never happen with the above code, due to the final step never being displayed. It would be nice if this triggered on the final visible step. If other steps cannot be found in the DOM then they should not be included.

This would have a variety of use cases, such as the case when DOM elements are hidden based on user access level. The tour steps should only highlight the DOM elements that exist.

Workaround
The only workaround I believe is to dynamically create the Steps array, using the same conditions that are hiding the elements. i.e. Check the same condition as to whether that step should be created or not. But this can be difficult when your steps span many components while the steps array is always built in a single component.

[HZooly]

I think your workaround is the solution: maintaining a single computed that returns your steps.

Else, Vue Tour cannot determine which step is the last.

[billmorgan123]

state
dashboard_dialer: {
name: 'web-dashboard-dialer',
steps: [
{
target: '[app-tour-web-dashboard-dialer-input]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
{
target: '[app-tour-web-dashboard-dialer-select-cid]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
{
target: '[app-tour-web-dashboard-dialer-dialpad]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
{
target: '[app-tour-web-dashboard-dialer-design-adjust]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
{
target: '[app-tour-web-dashboard-dialer-call-logs-filter]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
{
target: '[app-tour-web-dashboard-dialer-call-logs-reload]',
header: {
title: 'Move To Dashboard',
},
content: There you can open the dashboard,
params: {
placement: 'top'
},
is_admin: false,
permission: false,
},
],
options: {
highlight: true,
},
started: false,
},
html

  <v-tour 
  :name="getWebDashboardTour.name" 
  :class="`${getWebDashboardTour.started?'vm--overlay':''}`" 
  :steps="getWebDashboardTour.steps" 
  :options="getWebDashboardTour.options" 
  :callbacks="{
    onStart: onStartTour,
    onSkip: onSkipTour,
    onFinish: onFinishTour,
    onStop: onStopTour
  }"
>
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.steps[tour.currentStep]"
        :key="tour.currentStep"
        :step="tour.steps[tour.currentStep]"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :skip="tour.skip"
        :is-first="tour.isFirst"
        :is-last="tour.isLast"
        :labels="tour.labels"
      >
        <!-- <template v-if="tour.currentStep === 2">
          <div slot="actions">
            <button @click="tour.previousStep" class="btn btn-primary">Previous step</button>
            <button @click="tour.nextStep" class="btn btn-primary">Next step</button>
          </div>
        </template> -->
      </v-step>
    </transition>
  </template>
</v-tour>


methods
onStartTour(){
  LOGGER.log(`${this.getWebDashboardTour.name}:::Start`)
  this.$store.state.app_tour.web.dashboard.started=true
},
onFinishTour(){
  LOGGER.log(`${this.getWebDashboardTour.name}:::Finish`)
  this.$store.state.app_tour.web.dashboard.started=false
},
onSkipTour(){
  LOGGER.log(`${this.getWebDashboardTour.name}:::Skip`)
  this.$store.state.app_tour.web.dashboard.started=false
},
onStopTour(){
  LOGGER.log(`${this.getWebDashboardTour.name}:::Stop`)
  this.$store.state.app_tour.web.dashboard.started=false
  this.$tours[this.getWebDashboardDialerTour.name].start()
},

[billmorgan123]

its show the finish button but after press on it onFinish callback never be called

[billmorgan123]

it resolve actually i never passed the finish function on props after that its working now
:finish="tour.finish"