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