How to toggle Vuetify Carousel component right/left arrows on and off

Question

I want to dynamically control the visibility of the (<) and (>) arrows in the Vuetify carousel component.

For example, so that the final right arrow on the last item disappears, or so that I can use internal buttons or other interactivity within the carousel-item content to replace the buttons dynamically. (I know the continuous prop can do the simple end case).

The documentation for the next-icon and prev-icon prop is bool or string and the default says $next.

Name    next-icon
Type    boolean | string
Default $next
Description Icon used for the "next" button if show-arrows is true

I can make the icon button disappear by setting it to false, but true doesn't make it reappear.

I'm guessing the string value is the icon name (like md-arrow-right?) but the documentation doesn't say what the default is, and that doesn't work. I'm guessing that "off" is setting the prop to false and "on" is restoring it to the icon name.

I also don't understand what $next means, and this isn't explained in the page. It errors if you use that as a value. Everything else seems to evaluate to false.

I'm guessing it's something like this:

<template>
  <v-carousel v-model="stepNo" :show-arrows="show.arrows" :next-icon="show.nextArrow" height="auto" light>
  <!-- ... -->
</template>

<script>
export default {
  data: () => {
    return {
      stepNo: 0,
      show: {
        arrows: true,
        nextArrow: "md-arrow-right",
      },
    }
  },
  watch: {
    stepNo: function(newStep, oldStep) {
      // some logic here, for example
      this.nextArrow = (newStep === 4) ? "md-arrow-right" : false;
    },
  },
  //...
}
</script>

---

UPDATE

One of my mistakes was md-arrow-right should be mdi-arrow-right (missing the i), or actually mdi-chevron-right as noted by tony19. So I can now set it to a literal icon OK.

But setting it to $next or $prev still doesn't work - it displays either nothing, and empty circle, or a $ sign which is actually the word $next. And this seems to "break" the binding and setting it to a literal icon after this, fails until reloading the page.

<i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;">$next</i>

Answer 1

I think that you can achieve the behavior you wanted without relying on documentation if it doesn't provide what you need.

Just inspect the left and right arrow of the carousel component and get the DOM Node by selector. Then you are ready to do what you want with the elements.

For exemple:

const nextButton = document.querySelector('.v-window__next button');

const prevButton = document.querySelector('.v-window__prev button');

(Maybe instead of document you can use the $el inside your component)

Now you can do whatever you want with your elements.

To show/hide dynamically:

nextButton.style.display = 'None'; // Hide
nextButton.style.display = 'Block'; // Show

To navigate:

nextButton.click(); // Go next.
prevButton.click(); // Go prev.

Vue is just JavaScript at the end, no magic ;)

BTW, you could try this directly in the browser console on the link you provided for the carousel.