# 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
# 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>