Vue 3 V-Model Simplified
In Vue 3, the v-model directive has been simplified and made even more powerful. The v-model directive is used to create two-way data bindings on form inputs and components. This means that changes to the input value will automatically update the data in the Vue instance, and changes to the data in the Vue instance will update the input value.
One of the key changes in Vue 3 is the removal of the .sync modifier. In Vue 2, the .sync modifier was used to create two-way data bindings on props in child components. In Vue 3, this functionality has been merged into the v-model directive. Now, instead of using v-model with the .sync modifier, you can simply use v-model directly on the prop.
Here’s an example of how v-model is used in Vue 3:
{{ message }}
const app = Vue.createApp({
data() {
return {
message: ‘Hello Vue!’
}
}
})
app.mount(‘#app’)
What if the modelValue is an object? And we bind the modelValue key with the input field .
I tried this and it appears that the setter function is not triggered.
I finally fully understood. Good job, thanks!
Amazing SIR!
DefineModel is now my preferred way to use v model in components
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>
<template>
<input v-model="modelValue" />
</template>
Now in Vue 3.3 there is available experimental feature which a cool shortcut for computed getter and setter, instead of use: const modelValue = defineModel() and use it in your v-model inside the component template <input v-model="modelValue" />
is your course fully composition api and script setup? if not can you make one?
Thank you so much! Just when I wanted this video! I just subbed to you! You are a lifesaver!