VModel

helper to wrap model update into a ref

WARNING

Only supported on vue3 When using with @vue/composition-api it will always return ref(undefined)

Parameters

import { useVModel } from "vue-composable"; useVModel(props, propName); 

Parameters	Type	Required	Description
props	Props	true	Props object from the setup(props)
propName	string	true	Prop key, used to access property value

State

The useVModel function exposes the following reactive state:

import { useVModel } from "vue-composable"; const myValue = useVModel(props, "myValue"); 

State	Type	Description
myValue	Ref<T>	Value for the prop

Example

(opens new window)

Code

<template> <div> <p>myValue: {{ myValue }}</p> <child v-model:value="myValue" /> </div> </template> <script> import { defineComponent, ref } from "vue"; import { useVModel } from "vue-composable"; export default defineComponent({ components: { child: defineComponent({ template: `<div> <label :for="child-input">Update value</label> <input name="child-input" v-model="value"> </div>`, props: { value: String }, setup(props) { const value = useVModel(props, "value"); return { value }; } }) }, setup() { const myValue = ref("MyValue"); return { myValue }; } }); </script>