Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat(VSlideGroup): Expose hasNext and hasPrev in v-slide-group #20050

Merged
merged 1 commit into from
Jul 2, 2024

Conversation

PiotrWasak
Copy link
Contributor

@PiotrWasak PiotrWasak commented Jun 24, 2024

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>

@reddytocode
Copy link

reddytocode commented Jun 25, 2024

@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>

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants