Vue Form Inputs

Welcome to The Coding College! Forms are a fundamental part of web development, enabling user interaction and data submission. Vue provides powerful tools to create and manage form inputs seamlessly, making it easy to build interactive forms with minimal boilerplate.

In this guide, we’ll cover how to work with form inputs in Vue, including two-way data binding with v-model, handling input events, and validating form data.

Basics of Form Inputs in Vue

Vue simplifies working with form inputs by using the v-model directive for two-way data binding. With v-model, you can easily bind an input field’s value to a Vue data property.

Example: Basic Input Binding

<template>
  <div>
    <label for="username">Username:</label>
    <input id="username" type="text" v-model="username" />
    <p>Your username is: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

Handling Different Input Types

Text Input

<input type="text" v-model="textInput" />

Checkbox

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

Radio Buttons

<input type="radio" value="Option 1" v-model="selectedOption" />
<input type="radio" value="Option 2" v-model="selectedOption" />
<p>Selected: {{ selectedOption }}</p>

Dropdown (Select)

<select v-model="selectedOption">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
</select>
<p>Selected: {{ selectedOption }}</p>

Textarea

<textarea v-model="message"></textarea>
<p>Message: {{ message }}</p>

Handling Form Submissions

You can listen for form submission events using @submit.prevent.

<template>
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input id="name" type="text" v-model="name" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  },
  methods: {
    submitForm() {
      alert(`Form submitted with name: ${this.name}`);
    }
  }
};
</script>

Binding Multiple Checkboxes

Vue allows you to bind multiple checkboxes to an array.

<template>
  <div>
    <label>
      <input type="checkbox" value="Option 1" v-model="selectedOptions" />
      Option 1
    </label>
    <label>
      <input type="checkbox" value="Option 2" v-model="selectedOptions" />
      Option 2
    </label>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

Input Modifiers

Vue provides modifiers for the v-model directive to enhance functionality.

.lazy Modifier

Syncs the value after the change event, rather than input.

<input v-model.lazy="name" />

.trim Modifier

Trims whitespace from the input value.

<input v-model.trim="name" />

.number Modifier

Converts the input value to a number.

<input v-model.number="age" type="number" />

Validating Form Inputs

Validation is crucial for ensuring correct data input. You can validate inputs directly or use third-party libraries like VeeValidate.

Basic Validation Example

<template>
  <form @submit.prevent="submitForm">
    <label for="email">Email:</label>
    <input id="email" type="email" v-model="email" />
    <p v-if="!isValidEmail">Invalid email address</p>
    <button type="submit" :disabled="!isValidEmail">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: ""
    };
  },
  computed: {
    isValidEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(this.email);
    }
  },
  methods: {
    submitForm() {
      alert(`Submitted: ${this.email}`);
    }
  }
};
</script>

Advanced Form Handling with Vue

Using Multiple Inputs

<template>
  <form @submit.prevent="submitForm">
    <label for="firstName">First Name:</label>
    <input id="firstName" type="text" v-model="formData.firstName" />

    <label for="lastName">Last Name:</label>
    <input id="lastName" type="text" v-model="formData.lastName" />

    <button type="submit">Submit</button>
  </form>
  <p>Submitted Data: {{ formData }}</p>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        firstName: "",
        lastName: ""
      }
    };
  },
  methods: {
    submitForm() {
      alert(`Form submitted: ${JSON.stringify(this.formData)}`);
    }
  }
};
</script>

Two-Way Binding with Custom Components

You can create custom form components that support v-model.

CustomInput.vue

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue']
};
</script>

Usage

<template>
  <CustomInput v-model="customInput" />
  <p>Value: {{ customInput }}</p>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: { CustomInput },
  data() {
    return {
      customInput: ""
    };
  }
};
</script>

Conclusion

Vue makes working with forms intuitive and efficient, thanks to features like v-model, input modifiers, and event handling. By mastering these tools, you can build robust, user-friendly forms for any application.

For more in-depth Vue tutorials and coding resources, visit The Coding College.

Leave a Comment