Displaying individual errors Inertia Vue - Laravel App

Question

So I have a dynamic table, where you can add as many services as you want, you can select how many of them and if you want to have a discount for each service

<tr v-if="proceduresList.length" v-for="(procedure,index) in proceduresList" :key="procedure.id">
   <td>{{ procedure.name }}</td>
   <td>
      <input v-model="procedure.amount" type="number" step="any" class="form-control">                            
   </td>
   <td>
       <input v-model="procedure.discount" type="number" step="any" class="form-control">
   </td>
   <td class="text-center">
       <button class="btn btn-danger btn-sm" @click="removeProcedure(procedure)"><i class="fa fa-trash"></i></button>
   </td>
</tr>

I have a validation for the procedures array in my laravel backend whick, In case of errors, returns something like this

errors:Object
 description:"The description field is required."
 procedures.0.amount:"The procedures.0.amount field is required."
 procedures.1.discount:"The procedures.1.discount field is required."
 procedures.2.amount:"The procedures.2.amount field is required."
 procedures.2.discount:"The procedures.2.discount field is required."
 start_date:"The start date field is required."

What I want to do is to display the individual errors for each row, I haven't figured out how.

I tried like this

<input v-model="procedure.amount" type="number" step="any" class="form-control">
<span v-if="attentionForm.errors.procedures[index].amount">{{ attentionForm.errors.procedures[index].amount }}</span>

But when I add a service / procedure to the table, the page goes blank and in the debugger it says:

TypeError
 Cannot read properties of undefined (reading '0')

I think you need to double check maybe: v-if="attentionForm.errors.procedures[index] && attentionForm.errors.procedures[index].amount" because it tries directly to find the amount in error and since it is not there it crashes — Snoxik
– Snoxik, Commented Apr 25, 2022 at 13:43

cdruc · Accepted Answer · 2022-04-25 18:25:04Z

1

You can use square brackets to access the error property:

<span v-if="attentionForm.errors[`procedures.${index}.amount`]">
  {{ attentionForm.errors[`procedures.${index}.amount`] }}
</span>

Example here: https://youtu.be/LILSriakRZA?t=547

answered Apr 25, 2022 at 18:25

cdruc

6573 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying individual errors Inertia Vue - Laravel App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related