Can not change the size of Arrow

[prakulj]

I wish to change the size of the arrow in vue-tour. While I can do it manually by inspecting and changing the values, I am not able to do it using CSS as .v-step__arrow[ID] has some runtime generated ID associated with it.

[segni12]

I have a work around for you. In my case I didn't want the arrow in some of my steps(not all). So this is what I did by customising the template.

<template slot="content">
      <div :class="{ 'no-need-of-arrow-pointer': tour.steps[tour.currentStep].no_need_of_arrow }">
        <p v-html="tour.steps[tour.currentStep].content"></p>
      </div>
</template>

And in my css I did the following:

.no-need-of-arrow-pointer ~ .v-step__arrow::before {
    display: none;
  }

And it worked. You can customise the arrow just like this.