Vue 3·Vue from reactivity to a routed app

Events and forms

Handle events and bind form controls with v-model.

Intermediate 12 min read Lesson 4 of 300 Challenge included

What you will be able to do

Use @click, @submit and other event listeners.
Use v-model for standard form controls.
Use .prevent on form submit to stop the page reload.
Validate on the server even after client validation.

In plain English

v-on listens to events and v-model creates two-way binding for form controls. v-model respects the control type: checkbox booleans, radio values, select options and text inputs. Use modifiers such as .trim and .number deliberately.

form.vueHTML

<script setup>
import { ref } from 'vue'

const email = ref('')
const accepted = ref(false)

function submit() {
  console.log({ email: email.value, accepted: accepted.value })
}
</script>

<template>
  <form @submit.prevent="submit">
    <label>Email <input v-model.trim="email" type="email" required></label>
    <label><input v-model="accepted" type="checkbox"> Accept terms</label>
    <button type="submit">Subscribe</button>
  </form>
</template>

Your turn

Trim a name input

Easy

Bind a text input to a ref called name and trim whitespace automatically.

HTML · starter

<input v-model="">

Check your understanding before moving on.

Knowledge checkQuestion 1

What does v-model do on a checkbox?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Lists and keys

Lesson 4 of 300 · 0% of course