为什么在编辑发票时看不到我的发票项目? [英] Why Can't I see My Invoice Items When I Edit My Invoice?

问题描述

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

我使用单个 Bootstrap 模型来创建和编辑我的 TicketInvoice &它是 TicketInvocieItems，但是当我点击编辑"时，Bootstrap 模型会打开 &我看到数据填充了 TicketInvoice，但看不到 TicketInvoiceItems 的数据.我也不知道如何填写TicketInvoiceItems的数据.

我的 ticketInvoiceItems 输入字段:

<tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key"><!--乘客姓名--><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><!--票号--><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><!----------- 下方的任何其他领域 ----------->

我的 HTML 编辑按钮:

解决方案
在您的 editModel 方法中添加以下几行:
 $("#addNewTicketInvoice").modal("show");this.form.fill(ticketInvoice);this.form.ticketInvoiceItems=ticketInvoice.ticket_invoice_items;
this.form.ticketInvoiceItems 将是一个对象，用于遍历您应该使用的值 
 Object.values(this.form.ticketInvoiceItems).forEach(....
I'm using Laravel 5.7 & VueJs 2.5.* ...

I'm using a single Bootstrap Model to create as well as edit my TicketInvoice & it's TicketInvocieItems, but when i hit Edit, Bootstrap Model opens & i see data fill with TicketInvoice but can't see data of TicketInvoiceItems. I don't know how to fill data of TicketInvoiceItems as well.

My ticketInvoiceItems input fields:
<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 ----------->

My HTML edit Button:
<a href="#" @click="editModel(ticketInvoice)">
  <i class="fas fa-user-edit fa-lg text-orange"></i>
</a>

My VueJs editModel() code:
<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>

My data() in VueJs
<script>
  export default {
    data() {
      return {
        editmode: true,
        ticketInvoices: {},
        vendors: null,
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_grand_total: "",

          ticketInvoiceItems: [{
            id: "",
            ticket_invoice_id: "",
            passenger_name: "",
            ticket_no: "",
            departure_date: "",
            fares: "",
            sub_total: 0
          }]
        })
      };
    },
    </script>

An Image For Better Understanding
解决方案
In your editModel method add these lines :
   $("#addNewTicketInvoice").modal("show");
   this.form.fill(ticketInvoice);
   this.form.ticketInvoiceItems=ticketInvoice.ticket_invoice_items;
this.form.ticketInvoiceItems will be an object to loop through its values you should use 
   Object.values(this.form.ticketInvoiceItems).forEach(....


                        
这篇关于为什么在编辑发票时看不到我的发票项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！