useVModel ​
Shorthand for v-model binding, props + emit -> ref
Usage ​
js
import { useVModel } from '@vueuse/core'
export default {
setup(props, { emit }) {
const data = useVModel(props, 'data', emit)
console.log(data.value) // props.data
data.value = 'foo' // emit('update:data', 'foo')
},
}
<script setup>
​
vue
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
const props = defineProps<{
modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])
const data = useVModel(props, 'modelValue', emit)
</script>
Type Declarations ​
Show Type Declarations
typescript
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
}
export declare 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]>
export declare 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], true>,
): Ref<UnwrapRef<P[K]>>
Source ​
Contributors ​
Anthony Fu
Jelf
webfansplz
motian
objectisundefined
Alex Liu
白雾三è¯
Eduardo Wesley
Roman Meshcheryakov
久染
chaii3
Tmk
wheat
sondh0127
Zenthae
Eduardo San Martin Morote
lstoeferle
Alex Kozack
Homyee King
Prabu Rangki
Leonidas Arvanitis
yangger
Changelog ​
v10.4.0
on 8/25/2023v10.2.0
on 6/16/2023v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.1
on 3/23/2023v9.2.0
on 9/5/2022v8.9.3
on 7/14/2022