Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

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

$
0
0

I want to dynamically control the visibility of (<) 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:

<v-carousel v-model="stepNo" :show-arrows="show.arrows" height="auto" light >


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; 
    },
},

Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>