VueJS (InertiaJS) + Laravel 8 displaying multiple inputs errors

1.2k Views Asked by At

I'm trying to display my multiple input errors.

I have a multiple inputs form for several episodes. Each one have a title and a description.

I can display the other errors + the array error (1 ep min and 15 ep max)

But I can't loop inside my episodes array.

VueJS (through Vue Tools) show me the right errors such as : errors.episodes.0.description: 0: The episodes.0.description field is required.

But when I want to loop through errors.episodes[index].description VueJS shows me:
[Vue warn]: Error in render: "TypeError: can't access property 0, _vm.$page.errors.episodes is undefined"

I tried this

<div class="text-red-600" v-if="$page.errors.episodes[index].description">
    {{ $page.errors.episodes[index].description[0] }}
</div>

Thanks for helping me guys

2

There are 2 best solutions below

0
On

to access $page in vue to do with this

<div class="text-red-600" v-if="this.$page.errors.episodes[index].description">
    {{ this.$page.errors.episodes[index].description[0] }}
</div>
0
On

Problem solved, the "episodes.0.title" was the full index I had to do this :

<div class="text-red-600" v-if="$page.errors['episodes.0.title']">{{ $page.errors['episodes.0.title'][0] }}</div>