[Vuejs]-Dynamically fill field based on select from another field

by

1👍

Rather than bind the <select> menu to the selected customer’s Id (with v-model), instead bind it to the entire customer object, then you have easy access to the selectedCustomers name, id, etc:

   .form-field
      label(for="customer_name") Customer name
      input(type="text" autocomplete="off" v-model="selectedCustomer.name" readonly )
    .form-field
      label(for="customer_id") Customer ID
      select(autocomplete="off" v-model="selectedCustomer")
        option(v-for="customer in customers" :value="customer" :key="customer.customer_Id") {{customer.name}}
    .form-field
      label(for="company_id") Company ID
      input(v-model="selectedCustomer.company_Id" readonly)

You’ll need to create a property to store the selectedCustomer object:

data() { return {
   customers: [ ... ]
   selectedCustomer: {},
} },
👤wildhart

Leave a comment