Laravel验证失败时将old()表单数据传入Vue.js动态字段的问题

Hey there, I totally get how frustrating this can be—dynamic form fields + Laravel validation errors are a common pain point, especially when the usual old() helper doesn’t play nice with Vue out of the box. Let’s walk through exactly how to get your old phone numbers populated back into your Vue phone_number_field array after a validation fail.

Step 1: Pass Old Input to Your Vue Component from Blade #

First, we need to send the old() data from your Laravel backend straight to your Vue component as a prop. In your blade template, use Laravel’s @json directive (it’s safer than manual json_encode because it handles quotes and escaping properly):

<!-- In your Blade file -->
<phone-number-form 
  :initial-phones="@json(old('phone_number_field', []))"
  :phone-errors="@json($errors->get('phone_number_field.*'))"
></phone-number-form>

• The old('phone_number_field', []) ensures we get the previous input array, or an empty array if there’s no old data.
• We also pass validation errors for the phone fields so you can display them in Vue later (optional but helpful for user experience).

Step 2: Initialize Vue’s Data with the Prop #

In your Vue component, accept the initialPhones prop and use it to set up your phoneNumberField array. We’ll use the spread operator to avoid mutating the prop directly (Vue warns against modifying props directly):

<template>
  <div>
    <!-- Dynamic Phone Fields -->
    <div v-for="(phone, index) in phoneNumberField" :key="index" class="mb-3">
      <input 
        type="text" 
        :name="`phone_number_field[${index}]`" 
        v-model="phone"
        class="border rounded p-2"
      >
      <!-- Display Validation Errors -->
      <span v-if="phoneErrors[index]" class="text-red-500 block mt-1">
        {{ phoneErrors[index][0] }}
      </span>
    </div>

    <!-- Add Phone Button -->
    <button @click="addPhoneField" class="bg-blue-500 text-white px-4 py-2 rounded">
      Add Phone Number
    </button>
  </div>
</template>

<script>
export default {
  props: {
    initialPhones: {
      type: Array,
      default: () => []
    },
    phoneErrors: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      phoneNumberField: [...this.initialPhones] // Populate with old input
    }
  },
  methods: {
    addPhoneField() {
      this.phoneNumberField.push('') // Add empty field for new phone entry
    }
  }
}
</script>

Step 3: Ensure Form Input Names Match Laravel’s Array Format #

Notice how we set the name attribute to phone_number_field[${index}]—this tells Laravel to treat the inputs as an array, which matches how we’re using old('phone_number_field'). Without this array notation, Laravel won’t store or return the input correctly.

Quick Notes to Avoid Snags #

• Mutating Props: Never directly modify the initialPhones prop—always copy it to your component’s data first (we did this with [...this.initialPhones]).
• Empty Initial State: If the user hasn’t submitted the form yet, old('phone_number_field') will be null, so we default to an empty array to avoid errors.
• Complex Field Structures: If your phone fields are objects (instead of plain strings), just adjust the initialPhones prop and how you push new fields to match your data shape.

Give this setup a go—it should seamlessly repopulate your dynamic phone fields with the user’s previous input when validation fails. If you hit any weird edge cases with your specific setup, feel free to tweak the logic to fit!

内容的提问来源于stack exchange，提问作者Cruorzy