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!