pulsardev/vue-tour

Getting lots of errors when using custom template example from docs

gilesbutler opened this issue ยท 3 comments

Hey Guys,

We're following the example from the docs...

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.currentStep === index"
        v-for="(step, index) of tour.steps"
        :key="index"
        :step="step"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :isFirst="tour.isFirst"
        :isLast="tour.isLast"
      >
        <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>

But getting the following errors...

Error in render: "TypeError: Cannot read property 'buttonSkip' of undefined"

TypeError: Cannot read property 'buttonSkip' of undefined at Proxy.VStepvue_type_template_id_aa0cbe42_scoped_true_render

Error in mounted hook: "TypeError: Cannot read property 'setAttribute' of undefined"

vue.common.js:1743 TypeError: Cannot read property 'setAttribute' of undefined

Any ideas?

Hi @gilesbutler,

Ok we have looked at it, actually we forgot to update the documentation for v1.1.0. It adds one prop labels to the v-step component.

So to make it work, for now you can simply add :labels="tour.labels" to v-step like this:

<v-step
            v-if="tour.currentStep === index"
            v-for="(step, index) of tour.steps"
            :key="index"
            :step="step"
            :previous-step="tour.previousStep"
            :next-step="tour.nextStep"
            :stop="tour.stop"
            :is-first="tour.isFirst"
            :is-last="tour.isLast"
            :labels="tour.labels"
          >

And it should work!
In the future, we will probably put a default value to this prop and make it optionnal so that it doesn't break anything.

Awesome!! Thanks so much for the super fast response @mmorainville - really appreciate it :)

Oh my god! This has saved my day!