Skip to content
On this page

useVModels

Category
Export Size
1.09 kB
Last Changed
5 months ago
Related

Shorthand for props v-model binding. Think it like toRefs(props) but changes will also trigger emit.

Usage

js
import { useVModels } from '@vueuse/core'

export default {
  props: {
    foo: String,
    bar: Number,
  },
  setup(props, { emit }) {
    const { foo, bar } = useVModels(props, emit)

    console.log(foo.value) // props.foo
    foo.value = 'foo' // emit('update:foo', 'foo')
  },
}
import { useVModels } from '@vueuse/core'

export default {
  props: {
    foo: String,
    bar: Number,
  },
  setup(props, { emit }) {
    const { foo, bar } = useVModels(props, emit)

    console.log(foo.value) // props.foo
    foo.value = 'foo' // emit('update:foo', 'foo')
  },
}

Type Declarations

typescript
/**
 * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
 *
 * @see https://vueuse.org/useVModels
 * @param props
 * @param emit
 */
export declare function useVModels<P extends object, Name extends string>(
  props: P,
  emit?: (name: Name, ...args: any[]) => void,
  options?: UseVModelOptions<any>
): ToRefs<P>
/**
 * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
 *
 * @see https://vueuse.org/useVModels
 * @param props
 * @param emit
 */
export declare function useVModels<P extends object, Name extends string>(
  props: P,
  emit?: (name: Name, ...args: any[]) => void,
  options?: UseVModelOptions<any>
): ToRefs<P>

Source

SourceDocs

Contributors

Anthony Fu
Jelf
sondh0127
William T. Kirby
Alex Kozack
ordago
Emīls Gulbis

Changelog

v8.9.3 on 7/14/2022
71550 - fix(useVModel)!: rename type VModelOptions to UseVModelOptions (#1894)
v8.4.0 on 5/3/2022
66e82 - feat(useVModel): add option to define defaultValue (#1537)

Released under the MIT License.