Tour stops when targets aren't found

[lincoln017]

I have a five-step tour on a given page where step 3's target might not exist given the underlying data being displayed. Unfortunately, when this occurs, the tour stops and steps 4 and 5 are never executed.

Ideally, vue-tour would provide an option to automatically skip any step where the target isn't found. Alternatively, each step could offer a disabled property which we could set to TRUE prior to launching the tour and upon programmatically determining -- in this case -- target step 3 isn't available.

As it stands, I'll have to programmatically reset the steps each time the page is drawn depending on whether or not step 3 may exist. Is there an easier / better way?

Thanks.

[GeorgeBetts]

To achieve this you would make your steps a computed property, this essentially allows you to do the 'disabled' option as you suggested, but will also take advantage of Vue's reactivity.

See this example, I am only including step 2 in the tour on a condition. In this case the condition is whether the prop is set to true or false, but this could be anything. If you make this the same condition as the show / hide on the element, then the step will only be included when the element is visible.

<template>
  <div>
    <h1 data-v-step="tour-step-1">Highlight this in a tour!</h1>
    <h1 v-if="showConditinalSteps" data-v-step="tour-step-2">
      This element will only be included in the tour sometimes.
    </h1>
    <h1 data-v-step="tour-step-3">Highlight this in step 3!</h1>
    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
export default {
  name: "ExampleTour",

  props: {
    showConditionalSteps: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    steps: function () {
      let tourSteps = [];
      tourSteps.push({
        target: '[data-v-step="tour-step-1"]',
        content: "Tour content",
      });

      // only include this step on a certain condition
      if (this.showConditionalSteps) {
        tourSteps.push({
          target: '[data-v-step="tour-step-2"]',
          content: "Tour content",
        });
      }

      tourSteps.push({
        target: '[data-v-step="tour-step-3"]',
        content: "Tour content",
      });
      return tourSteps;
    },
  },
};
</script>

[fgsalomon]

Hi,

Shouldn't this be handled through the stopOnTargetNotFound option?

Looking at the code (here and here) it seems to me that the if this option is set to false and if any target doesn't exist the tour shouldn't stop.

I tried this but it didn't work. Am I wrong on the purpose of this option?

PD: @GeorgeBetts solution works perfectly