⬅️ Back to Table of Contents

📄 useVModel

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	11
🟢 Vue Composition API	3
📐 Interfaces	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useVModel/index.ts

📦 Imports

Name	Source
Ref	vue
UnwrapRef	vue
WritableComputedRef	vue
CloneFn	../useCloned
isDef	@vueuse/shared
computed	vue
deepRef	vue
getCurrentInstance	vue
nextTick	vue
watch	vue
cloneFnJSON	../useCloned

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none
computed	computed	none	none

---

Functions

useVModel(props: P, key: K, emit: (name: Name, ...args: any[]) => void, options: UseVModelOptions<P[K], false>): WritableComputedRef<P[K]>

Shorthand for v-model binding, props + emit -> ref

Parameters:

• props any: No description
• key any: (default 'modelValue')
• emit any: No description
• options any: No description

See: https://vueuse.org/useVModel

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Shorthand for v-model binding, props + emit -> ref
 *
 * @see https://vueuse.org/useVModel
 * @param props
 * @param key (default 'modelValue')
 * @param emit
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */

Code

export function useVModel<P extends object, K extends keyof P, Name extends string>(
  props: P,
  key?: K,
  emit?: (name: Name, ...args: any[]) => void,
  options?: UseVModelOptions<P[K], false>,
): WritableComputedRef<P[K]>

Internal helpers

Declared inside another function in this file.

cloneFn(val: P[K]): P[K]

Parameters:

• val P[K]

Returns: P[K]

Code

(val: P[K]) => !clone
    ? val
    : typeof clone === 'function'
      ? clone(val)
      : cloneFnJSON(val)

getValue(): P[K]

Returns: P[K]

Code

() => isDef(props[key!])
    ? cloneFn(props[key!])
    : defaultValue

triggerEmit(value: P[K]): void

Parameters:

• value P[K]

Returns: void

Calls:

• shouldEmit
• _emit

Code

(value: P[K]) => {
    if (shouldEmit) {
      if (shouldEmit(value))
        _emit(event, value)
    }
    else {
      _emit(event, value)
    }
  }

---

Interfaces

UseVModelOptions<T, Passive extends boolean = false>

Interface Code

export interface UseVModelOptions<T, Passive extends boolean = false> {
  /**
   * When passive is set to `true`, it will use `watch` to sync with props and ref.
   * Instead of relying on the `v-model` or `.sync` to work.
   *
   * @default false
   */
  passive?: Passive
  /**
   * When eventName is set, it's value will be used to overwrite the emit event name.
   *
   * @default undefined
   */
  eventName?: string
  /**
   * Attempting to check for changes of properties in a deeply nested object or array.
   * Apply only when `passive` option is set to `true`
   *
   * @default false
   */
  deep?: boolean
  /**
   * Defining default value for return ref when no value is passed.
   *
   * @default undefined
   */
  defaultValue?: T
  /**
   * Clone the props.
   * Accepts a custom clone function.
   * When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
   *
   * @default false
   */
  clone?: boolean | CloneFn<T>
  /**
   * The hook before triggering the emit event can be used for form validation.
   * if false is returned, the emit event will not be triggered.
   *
   * @default undefined
   */
  shouldEmit?: (v: T) => boolean
}

Properties

Name	Type	Optional	Description
passive	Passive	✓	not shown
eventName	string	✓	not shown
deep	boolean	✓	not shown
defaultValue	T	✓	not shown
clone	boolean \| CloneFn<T>	✓	not shown
shouldEmit	(v: T) => boolean	✓	not shown

---

Generated by Syntax Scribe