vuetify
vuetify copied to clipboard
feat(VSlideGroup): Expose hasNext and hasPrev in v-slide-group
fixes #20049
Description
I am seeking to implement custom navigation buttons in the v-slide-group component and control their disabled state based on hasNext and hasPrev computed flags. The v-slide-group component already utilizes these flags internally, but they are not exposed, making it impossible to access them via ref. I used it like that in Vuetify 2, so that would also improve compatibility with previous version.
Markup
<template>
<v-app>
<v-container>
<v-btn :disabled="prevDisabled" @click="prev">Prev</v-btn>
<v-btn :disabled="nextDisabled" @click="next">Next</v-btn>
<v-slide-group ref="slideGroup">
<v-slide-group-item v-for="n in 20" :key="n">
<v-card height="200" width="200">{{ n }}</v-card>
</v-slide-group-item>
</v-slide-group>
</v-container>
</v-app>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'Playground',
setup () {
const slideGroup = ref(null)
const prev = () => slideGroup.value.scrollTo('prev')
const next = () => slideGroup.value.scrollTo('next')
const prevDisabled = computed(() => !slideGroup.value?.hasPrev)
const nextDisabled = computed(() => !slideGroup.value?.hasNext)
return {
slideGroup,
prev,
next,
prevDisabled,
nextDisabled,
}
},
}
</script>
@PiotrWasak You can add the language to your code block, and it will look better 💡
Just add this at the beginning of your code block after the back ticks:
```javascript
<template>
<v-app>
<v-container>
<button @click="testFn">Test</button>
<v-slide-group ref="test" />
</v-container>
</v-app>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Playground',
setup () {
const test = ref(null)
function testFn () {
console.log(test.value)
}
return {
test,
testFn
}
},
}
</script>