extendRef

Category

Reactivity

Export Size

282 B

Last Changed

2 years ago

Add extra attributes to Ref.

WARNING

This function only works for Vue 2.7 or above.

Usage

Please note the extra attribute will not be accessible in Vue's template.

import { ref } from 'vue'
import { extendRef } from '@vueuse/core'

const myRef = ref('content')

const extended = extendRef(myRef, { foo: 'extra data' })

extended.value === 'content'
extended.foo === 'extra data'

Refs will be unwrapped and be reactive

const myRef = ref('content')
const extraRef = ref('extra')

const extended = extendRef(myRef, { extra: extraRef })

extended.value === 'content'
extended.extra === 'extra'

extended.extra = 'new data' // will trigger update
extraRef.value === 'new data'

Type Declarations

export interface ExtendRefOptions<Unwrap extends boolean = boolean> {
  /**
   * Is the extends properties enumerable
   *
   * @default false
   */
  enumerable?: boolean
  /**
   * Unwrap for Ref properties
   *
   * @default true
   */
  unwrap?: Unwrap
}
/**
 * Overload 1: Unwrap set to false
 */
export declare function extendRef<
  R extends Ref<any>,
  Extend extends object,
  Options extends ExtendRefOptions<false>,
>(ref: R, extend: Extend, options?: Options): ShallowUnwrapRef<Extend> & R
/**
 * Overload 2: Unwrap unset or set to true
 */
export declare function extendRef<
  R extends Ref<any>,
  Extend extends object,
  Options extends ExtendRefOptions,
>(ref: R, extend: Extend, options?: Options): Extend & R

Source

Source • Docs

Contributors

Anthony Fu

vaakian X

Changelog

v10.0.0-beta.5 on 4/13/2023

13169 - feat(createTemplatePromise): new function (#2957)

v9.8.0 on 12/20/2022

8c82e - feat: support 2.7, close #2340