Fetch data and populate in text boxes if selected dropdown option

See more:

Javascript

Ajax

vue.js

I'm using `Laravel 5.7` & `VueJs 2.5.*` ...

I want to autofill my form textboxes with the values in database when i select dropdown option. i've been finding solution since days but didn't get any success. I'm very new at this....

If anyone could save to get me out from this issue i'll be very grateful. Thank You.

This is what i'm doing:

What I have tried:

My select tag:

<select id="ticket_invoice_no" @change="getRecord" name="ticket_invoice_no">
      <option v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id" :value="ticketInvoice.id">{{ ticketInvoice.ticket_invoice_no }}</option>

Someone told me to do something like this so i'm doing this, don't know what:

getRecord: function(e) {
      let id = e.target.value;
      axios
        .get('api/ticket-invoice/' + id)
        .then(response => {
        
          console.log(e.target.value, "Target id");
          console.log(id, "Invoice id i clicked is");
          console.log(response, "Response data");'
          
          this.form = ticket-invoice.fetch;
        })
        .catch(error => {
          console.log(error.response);
        });
    },

Route:

Route::get('ticket-invoice/{ticket_invoice}', 'API\TicketInvoiceController@fetch') -> name('ticket-invoice.fetch');

`method:{}`

public function fetch($id) {
      $ticketInvoices = TicketInvoice::findOrFail($id);
      return $ticketInvoices;
    }

My `data()`:

data() {
      return {
        editmode: true,
        ticketInvoices: {},
        ctInvoices: {},
        customers: null,
        form: new Form({
          id: "",
          customer_id: "",
          ct_invoice_no: "",
          ct_invoice_date: "",
          ct_invoice_fares_total: 0,
          ct_invoice_grand_total: 0,

          ctInvoiceItems: [{
            id: "",
            ct_invoice_id: "",
            ct_passenger_name: "",
            ct_fares: 0,
            ct_sub_total: 0
          }]
        })
      };
    },