Vue — Forms

Text input

<template>
  <div>
    <input v-model="text" placeholder="Type here">
    <p>You typed: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { text: '' }
  }
}
</script>

Textarea

<textarea v-model="message" placeholder="Long text"></textarea>
<p>{{ message }}</p>

Checkbox

<!-- Single checkbox -->
<input type="checkbox" v-model="checked">
<p>Checked: {{ checked }}</p>

<!-- Multiple checkboxes -->
<input type="checkbox" value="Jack" v-model="names">
<input type="checkbox" value="John" v-model="names">
<input type="checkbox" value="Mike" v-model="names">
<p>Names: {{ names }}</p>

Radio

<input type="radio" value="yes" v-model="picked">
<input type="radio" value="no" v-model="picked">
<p>Picked: {{ picked }}</p>

Select

<select v-model="selected">
  <option disabled value="">Please select</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<p>Selected: {{ selected }}</p>

Modifiers

<!-- .lazy: sync after change event -->
<input v-model.lazy="msg">

<!-- .number: convert to number -->
<input v-model.number="age">

<!-- .trim: remove whitespace -->
<input v-model.trim="text">

Form submission

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" type="email" required>
    <input v-model="password" type="password" required>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return { email: '', password: '' }
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted:', this.email)
    }
  }
}
</script>

Mini Practice

1. Build a login form
2. Use different input types
3. Add validation with computed
4. Handle form submission

Up Next

Continue with Routing - Vue Router.