Displaying individual errors Inertia Vue

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" >                            
   </td>
   <td>
       <input v-model="procedure.discount" type="number" step="any" >
   </td>
   <td >
       <button  @click="removeProcedure(procedure)"><i ></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" >
<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')

CodePudding user response：

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