useCycleList
Cycle through a list of items.
Package: @vueuse/core
Category: Utilities
Usage
import { useCycleList } from '@vueuse/core'
const { state, next, prev, go } = useCycleList([
'Dog',
'Cat',
'Lizard',
'Shark',
'Whale',
'Dolphin',
'Octopus',
'Seal',
])
console.log(state.value) // 'Dog'
prev()
console.log(state.value) // 'Seal'
go(3)
console.log(state.value) // 'Shark'Options
| Option | Type | Default | Description |
|---|---|---|---|
| initialValue | MaybeRef<T> |
- | The initial value of the state. |
| fallbackIndex | number |
- | The default index when |
| getIndexOf | (value: T, list: T[]) => number |
- | Custom function to get the index of the current value. |
Returns
| Name | Type |
|---|---|
| state | shallowRef |
| index | computed<number> |
| next | Ref |
| prev | Ref |
| go | Ref |