Using Vuelidate with an Array of Objects: Step-by-Step Guide (2026)

Vuelidate is a powerful validation library for Vue.js applications that allows you to easily define and manage form validations. When dealing with an array of objects, things can get a bit tricky, especially if you need to apply validations conditionally. In this guide, we'll explore how to validate an array of objects in Vue.js using Vuelidate, focusing on a common scenario where only certain properties require validation.

Key Takeaways

• Learn how to apply Vuelidate to arrays of objects in Vue.js.
• Understand conditional validations with the requiredIf rule.
• Get familiar with the $each parameter for iterating validations.
• See how to handle common errors and troubleshooting tips.

Introduction

In Vue.js applications, forms often become complex when handling dynamic data structures such as arrays of objects. Vuelidate provides a flexible way to implement validations, but understanding how to apply these to arrays is crucial for maintaining clean and functional code.

This tutorial will cover the process of setting up validations for a form that loops through an array of objects, applying specific validation rules conditionally. This is particularly useful in scenarios like questionnaires where only certain fields require validation based on user input or other conditions.

Prerequisites

• Basic understanding of Vue.js and its component structure.
• Familiarity with Vuelidate and its core concepts.
• Node.js and npm installed on your machine.
• Vue CLI installed for creating Vue.js projects.

Step 1: Setting Up Your Vue Project

First, we'll create a new Vue.js project using Vue CLI. Open your terminal and run the following command:

vue create vuelidate-array-example

Navigate into your project directory:

cd vuelidate-array-example

Now, install Vuelidate:

npm install @vuelidate/core @vuelidate/validators

Step 2: Define Your Data Structure

Suppose you have an array of objects that represent a list of gifts, and each object has properties like name, type, value, passThrough, and description. You want to validate the passThrough property based on a certain condition.

In your component, define the data structure:

export default {
  data() {
    return {
      docs: ['Will', 'Testament'],
      specificGifts: [
        { name: 'Gift1', type: 'Type1', value: 100, passThrough: '', description: '' },
        { name: 'Gift2', type: 'Type2', value: 200, passThrough: '', description: '' }
      ]
    };
  }
};

Step 3: Set Up Vuelidate

Next, set up Vuelidate in your component. Import the necessary validators and create a validation schema that uses $each to iterate over the array and apply the validation rule to the passThrough property:

import useVuelidate from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';

export default {
  setup() {
    const state = reactive({
      docs: ['Will', 'Testament'],
      specificGifts: [
        { name: 'Gift1', type: 'Type1', value: 100, passThrough: '', description: '' },
        { name: 'Gift2', type: 'Type2', value: 200, passThrough: '', description: '' }
      ]
    });
    const rules = {
      specificGifts: {
        $each: {
          passThrough: {
            required: requiredIf(function(value) {
              return state.docs.includes('Will');
            })
          }
        }
      }
    };
    const v$ = useVuelidate(rules, state);
    return { state, v$ };
  }
};

Step 4: Create the Form

Create a form in your template to loop through the specificGifts array and bind the inputs to the array elements:

Step 5: Handling Form Submission

Handle the form submission by checking if the form is valid using the Vuelidate instance:

methods: {
  submitForm() {
    if (this.v$.$validate()) {
      alert('Form is valid!');
      // Process the form
    } else {
      alert('Form is invalid!');
    }
  }
}

With the above setup, your form will validate the passThrough fields only if the condition in requiredIf is met.

Common Errors/Troubleshooting

• Validation Not Triggering: Ensure that Vuelidate is correctly imported and initialized. Double-check the condition logic in requiredIf.
• Incorrect Error Messages: Make sure the validation messages are correctly bound to the Vuelidate state.
• Form Submission Issues: Confirm that the form submission logic checks v$.$validate() before processing.

By following this step-by-step guide, you should be able to effectively use Vuelidate with an array of objects in your Vue.js applications. Understanding how to apply conditional validations can significantly enhance the user experience by ensuring that your forms are both dynamic and robust.

Frequently Asked Questions

What is Vuelidate?

Vuelidate is a lightweight model-based validation library for Vue.js applications that allows you to define validations using a simple schema.

How does $each work in Vuelidate?

The $each parameter is used to apply validation rules to each element in an array of objects, enabling iteration over each item for validation purposes.

Why isn't my validation triggering?

Ensure that your validation schema is correctly set up and that the conditions for triggering validation are met, such as correct use of requiredIf conditions.