Vue.js How to Access Elements of an Object

Question

I have an array of objects:

data: function() {
        return {
            customers:[],
         }
    },

that populates this select box:

         <label>DSO Affiliation:</label>
                <select  class="select-box form-control" name="customer" id="customer" v-model='customer_id' style="-webkit-appearance: none;">
                     <option value="" selected>Choose Customer</option>
                           <option v-for="customer in customers" :value="customer.id">
                                    {{ customer.customer_name }}
                           </option>
                </select>

Once a customer is selected I need to get the customer data from the selected object so that I can populate other form elements such as:

<label>Customer Address:</label>
<input type="text" class="form-control" name="cust_address" v-model='cust_address'>

I have the data in the customers:[ ] array. How do I get the customer data that was was selected in the select box without an additional trip to the server?

use a computed property to find the selected customer by customer_id or just bind :value="customer" and then your v-model property would point to the customer. — Steven B.
– Steven B., Commented Aug 7, 2020 at 22:02

Boussadjra Brahim · Accepted Answer · 2020-08-07 22:03:32Z

1

Watch the customer_id and update cust_address by filtering the customers array :

data: function() {
        return {
            customers:[],
         }
    },
watch:{
   customer_id(val){
     let found=this.customers.find(cust=>cust.id===val);
     this.cust_address=found?found.address:'';
    }
}

answered Aug 7, 2020 at 22:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js How to Access Elements of an Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related