Prepopulating Bulk Edit Forms with Common Values

You’ve built a single-record edit form that works great. Now users want to edit multiple records at once. Should the form start empty, or show the values from the selected records?

The answer: only prepopulate when all selected records share the same value.

The Problem

When editing a single task, your form looks like this:

<UpdateStatusForm
    :defaultStartDate="task.start_date"
    :defaultEndDate="task.end_date"
    :defaultPriority="task.priority"
    :tasks="[task]"
/>

But for bulk editing, if you pass no defaults:

<UpdateStatusForm
    :tasks="selectedTasks"
/>

…the form starts completely empty, even if all 50 selected tasks have the same due date. Users have to re-enter values that are already consistent across the selection.

The Solution: Computed Common Values

Add computed properties to check if all selected records share the same value:

computed: {
    commonStartDate() {
        const dates = this.selectedTasks.map(t => t.start_date);
        const unique = [...new Set(dates)];
        return unique.length === 1 ? unique[0] : null;
    },
    
    commonEndDate() {
        const dates = this.selectedTasks.map(t => t.end_date);
        const unique = [...new Set(dates)];
        return unique.length === 1 ? unique[0] : null;
    },
    
    commonPriority() {
        const priorities = this.selectedTasks.map(t => t.priority);
        const unique = [...new Set(priorities)];
        return unique.length === 1 ? unique[0] : null;
    }
}

Then pass these to your form component:

<UpdateStatusForm
    :defaultStartDate="commonStartDate"
    :defaultEndDate="commonEndDate"
    :defaultPriority="commonPriority"
    :tasks="selectedTasks"
/>

What This Does

• All 50 tasks have the same due date? Form prepopulates with that date.
• 25 tasks are “high” priority, 25 are “low”? Priority field stays empty (no common value).
• 48 tasks have no start date (null)? Start date field stays empty (null is the common value).

Key Insight

This pattern works because your child component already supports optional defaults with sensible fallbacks:

props: {
    defaultStartDate: { type: String, default: null },
    defaultEndDate: { type: String, default: null },
    defaultPriority: { type: String, default: '' }
}

The child component doesn’t care if it’s editing one record or fifty. It just uses whatever defaults you pass.

Rule of thumb: Only prepopulate when every record in the selection has the same value. This prevents confusion and shows users which fields are consistent across their selection.

Category: Laravel | Keywords: bulk edit, form prepopulation, Vue.js, computed properties, Laravel, UX