I am currently utilizing Shepherd as my tour guide in Vue. You can find the documentation here:
Below is the component I have created for it:
<template>
<div></div>
</template>
<script>
export default {
name: 'Guide',
props: {
element: {
type: Object,
required: true,
},
title: {
type: String,
},
text: {
type: String,
required: true,
},
position: {
type: String,
required: true,
},
},
mounted() {
this.$nextTick(() => {
const tour = this.$shepherd({
defaultStepOptions: {
cancelIcon: {
enabled: true,
},
classes: 'class-1 class-2',
scrollTo: { behavior: 'smooth', block: 'center' },
},
});
tour.addStep({
attachTo: { element: this.element, on: this.position },
title: this.title,
text: this.text,
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back',
},
{
action() {
return this.next();
},
text: 'Next',
},
],
id: 'creating',
});
tour.start();
});
},
};
</script>
<style lang="scss">
@import '~shepherd.js/dist/css/shepherd.css';
</style>
The issue I'm facing with my code is that in the parent component, I am unable to retrieve the element. I've attempted using ref in Vue to achieve this. Specifically, I need to access the element of this button:
<button ref="button">
Click
</button>
beforeMount() {
this.element = this.$refs.button;
},
However, the element is consistently returning null. How can I successfully obtain the element of the button?