Forms and v-model

Basic v-model

Keeps an input and a ref in sync.

<script setup>
import { ref } from "vue";
const email = ref("");
</script>

<template>
  <label>
    Email
    <input v-model.trim="email" type="email" />
  </label>
  <p>{{ email }}</p>
</template>

Checkboxes and selects

v-model works with common form controls.

<input v-model="agree" type="checkbox" />
<select v-model="role">
  <option value="learner">Learner</option>
  <option value="mentor">Mentor</option>
</select>

Submit a form

Prevent reload and read state.

<form @submit.prevent="onSubmit">
  <input v-model="title" />
  <button type="submit">Add</button>
</form>

function onSubmit() {
  console.log(title.value);
}

Modifiers

• v-model.trim strips whitespace
• v-model.number casts to number when possible
• v-model.lazy syncs on change instead of every input