显示个别错误 Inertia Vue - Laravel App

Question

所以我有一个动态 table，您可以在其中添加任意数量的服务，您可以 select 添加多少个，如果您想为每项服务都打折

<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>

我在我的 laravel 后端 whick 中对过程数组进行了验证，如果出现错误，returns 类似这样

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."

我想做的是显示每一行的个别错误，我还没有弄清楚如何。

我这样试过

<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>

但是当我向 table 添加服务/过程时，页面变为空白并且在调试器中显示：

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

Answer 1

您可以使用方括号访问错误属性:

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

此处示例：https://youtu.be/LILSriakRZA?t=547

显示个别错误 Inertia Vue - Laravel App

Displaying individual errors Inertia Vue - Laravel App

inertiajs

laravel

vue.js