为什么在编辑发票时看不到发票项目？

Question

我正在使用Laravel 5.7和VueJs 2.5.* ...

我正在使用一个Bootstrap模型来创建和编辑TicketInvoice，它是TicketInvocieItems，但是当我点击Edit时，Bootstrap Model打开并且我看到数据用{{1}填充}，但看不到TicketInvoice的数据。我也不知道如何填充TicketInvoiceItems的数据。

我的TicketInvoiceItems输入字段：

ticketInvoiceItems

我的<tbody> <tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key"> <!--Passenger Name--> <td> <input v-model="ticketInvoiceItem.passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }"> <has-error :form="form" field="passenger_name"></has-error> </td> <!--Ticket No.--> <td> <input v-model="ticketInvoiceItem.ticket_no" size="24" type="text" name="ticket_no" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('ticket_no') }"> <has-error :form="form" field="ticket_no"></has-error> </td> </tr> <!----------- ANY MANY OTHER FIELDS DOWN BELOW -----------> 编辑按钮：

HTML

我的<a href="#" @click="editModel(ticketInvoice)"> <i class="fas fa-user-edit fa-lg text-orange"></i> </a> VueJs代码：

editModel()

我在<script> /*==============EDIT INVOICE CODE==============*/ editModel(ticketInvoice) { this.editmode = true; this.form.reset(); this.form.clear(); $("#addNewTicketInvoice").modal("show"); this.form.fill(ticketInvoice); }, /*==============END EDIT INVOICE CODE==============*/ </script> 中的data()

VueJs

更好理解的图像

Answer 1

在您的editModel方法中，添加以下行：

   $("#addNewTicketInvoice").modal("show");
   this.form.fill(ticketInvoice);
   this.form.ticketInvoiceItems=ticketInvoice.ticket_invoice_items;

this.form.ticketInvoiceItems将成为循环遍历您应使用的值的对象

   Object.values(this.form.ticketInvoiceItems).forEach(....