syncRef
Two-way refs synchronization.
Demo
Usage
import { syncRef } from '@vueuse/core'
const a = ref('a')
const b = ref('b')
const stop = syncRef(a, b)
console.log(a.value) // a
b.value = 'foo'
console.log(a.value) // foo
a.value = 'bar'
console.log(b.value) // bar
import { syncRef } from '@vueuse/core'
const a = ref('a')
const b = ref('b')
const stop = syncRef(a, b)
console.log(a.value) // a
b.value = 'foo'
console.log(a.value) // foo
a.value = 'bar'
console.log(b.value) // bar
One directional
import { syncRef } from '@vueuse/core'
const a = ref('a')
const b = ref('b')
const stop = syncRef(a, b, { direction: 'rtl' })
import { syncRef } from '@vueuse/core'
const a = ref('a')
const b = ref('b')
const stop = syncRef(a, b, { direction: 'rtl' })
Type Declarations
export interface SyncRefOptions extends ConfigurableFlushSync {
/**
* Watch deeply
*
* @default false
*/
deep?: boolean
/**
* Sync values immediately
*
* @default true
*/
immediate?: boolean
/**
* Direction of syncing
*
* @default 'both'
*/
direction?: "ltr" | "rtl" | "both"
}
/**
* Two-way refs synchronization.
*
* @param left
* @param right
*/
export declare function syncRef<R extends Ref<any>>(
left: R,
right: R,
options?: SyncRefOptions
): () => void
export interface SyncRefOptions extends ConfigurableFlushSync {
/**
* Watch deeply
*
* @default false
*/
deep?: boolean
/**
* Sync values immediately
*
* @default true
*/
immediate?: boolean
/**
* Direction of syncing
*
* @default 'both'
*/
direction?: "ltr" | "rtl" | "both"
}
/**
* Two-way refs synchronization.
*
* @param left
* @param right
*/
export declare function syncRef<R extends Ref<any>>(
left: R,
right: R,
options?: SyncRefOptions
): () => void
Source
Contributors
Anthony Fu
zmtlwzy
Matias Capeletto