编辑发票时，为什么我看不到发票项目？ [英] Why can't I see my invoice items when I edit my invoice?

问题描述

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



我正在使用单一的Bootstrap模型创建和编辑我的`TicketInvoice`&它是`TicketInvocieItems`，但当我点击Edit时，Bootstrap Model打开&我看到数据用`TicketInvoice`填充但看不到`TicketInvoiceItems`的数据。我不知道如何填写TicketInvoiceItems的数据。



更好理解的图像



点击此处打开图片



我尝试过：

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.

An Image For Better Understanding

CLICK HERE TO OPEN IMAGE

What I have tried:

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

我的`HTML`编辑按钮：

My `HTML` edit Button:

<a href="#" @click="editModel(ticketInvoice)">
  
</a>

我的'VueJs``editModel（）`代码：

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);
      }
</script>

我在`VueJs`中的`data（）`：

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>

推荐答案

（ #addNewTicketInvoice）。modal（ show）;
this .form.fill（ticketInvoice）;
}
< / script>

("#addNewTicketInvoice").modal("show"); this.form.fill(ticketInvoice); } </script>

我在`VueJs`中的`data（）`：

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>

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