How does v-model work in Vue? | Vue.js Interview Questions

What You'll Learn

Basic v-model usage
v-model on components
Multiple v-model bindings

Basic v-model

code.txtVUE

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

v-model is Shorthand

code.txtVUE

<!-- v-model -->
<input v-model="message" />

<!-- Is equivalent to -->
<input
  :value="message"
  @input="message = $event.target.value"
/>

v-model on Components

code.txtVUE

<!-- CustomInput.vue -->
<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

<!-- Parent -->
<CustomInput v-model="searchText" />

Multiple v-model

code.txtVUE

<!-- UserForm.vue -->
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<!-- Parent -->
<UserForm
  v-model:firstName="first"
  v-model:lastName="last"
/>