devingray_
1 month ago
216
2
Vue

How to get nested errors into vue

Posted 1 month ago by devingray_
<form>
  <text-input v-model="form.position" :errors="$page.errors.position" class="pr-6 pb-8 w-full lg:w-1/2" label="Position" />
<text-input v-for="(phone_number, index) in form.phone_numbers" :key="phone_number[index]" v-model="form.phone_numbers[index].phone_number" class="pr-6 pb-8 w-full lg:w-3/3" label="Phone Number" />
<button class="text-blue hover:underline mb-8" @click.prevent="addPhoneNumber">+ Add Another Phone Number</button>
</form>

Then I have validation that will check the phone numbers in an array

'phone_numbers' => 'required|array|min:1',
 'phone_numbers.*.phone_number'  => 'phone:AU',

if an error occurs it gives me an errors array like this

["phone_numbers.0.phone_number": [ "validation.phone" ], "phone_numbers.1.phone_number": [ "validation.phone" ] ]

my question is, how would I use Vue js to get the validation errors for each index in the array.

I have tried errors.phone_numbers[index].phone_number

But this throws errors in the bundle

Please sign in or create an account to participate in this conversation.