Skip to content

toRefs

Category
Export Size
285 B
Last Changed
4 months ago

Extended toRefs that also accepts refs of an object.

Usage

ts
import { 
toRefs
} from '@vueuse/core'
import {
reactive
,
ref
} from 'vue'
const
objRef
=
ref
({
a
: 'a',
b
: 0 })
const
arrRef
=
ref
(['a', 0])
const {
a
,
b
} =
toRefs
(
objRef
)
const [
a
,
b
] =
toRefs
(
arrRef
)
const
obj
=
reactive
({
a
: 'a',
b
: 0 })
const
arr
=
reactive
(['a', 0])
const {
a
,
b
} =
toRefs
(
obj
)
const [
a
,
b
] =
toRefs
(
arr
)

Use-cases

Destructuring a props object

vue
<script lang="ts">
import { 
toRefs
,
useVModel
} from '@vueuse/core'
export default {
setup
(
props
) {
const
refs
=
toRefs
(
useVModel
(
props
, 'data'))
console
.
log
(
refs
.a.value) // props.data.a
refs
.a.value = 'a' // emit('update:data', { ...props.data, a: 'a' })
return { ...
refs
}
} } </script> <template> <
div
>
<
input
v-model
="a"
type
="text">
<
input
v-model
="b"
type
="text">
</
div
>
</template>

Type Declarations

ts
export interface ToRefsOptions {
  /**
   * Replace the original ref with a copy on property update.
   *
   * @default true
   */
  
replaceRef
?:
MaybeRefOrGetter
<boolean>
} /** * Extended `toRefs` that also accepts refs of an object. * * @see https://vueuse.org/toRefs * @param objectRef A ref or normal object or array. * @param options Options */ export declare function
toRefs
<
T
extends object>(
objectRef
:
MaybeRef
<
T
>,
options
?: ToRefsOptions,
):
ToRefs
<
T
>

Source

SourceDocs

Contributors

Anthony Fu
Anthony Fu
丶远方
Robin
IlyaL
Aaron-zon
Kasper Seweryn
ByMykel
vaakian X
chaii3
webfansplz
William T. Kirby

Changelog

v13.1.0 on
c1d6e - feat(shared): ensure return types exists (#4659)
v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.3.0 on
5309c - fix: don't trigger unwanted watchEffects (#3260)
v10.2.1 on
9f998 - fix: fix stack overflow caused by recursive setPrototypeOf (#3166)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access