javascript - Vue.js 如何访问对象的元素

Question

我有一个对象数组：

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

填充此选择框：

         <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>

选择客户后，我需要从所选对象中获取客户数据，以便填充其他表单元素，例如：

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

我有customers:[ ]数组中的数据。如何在不额外访问服务器的情况下获取在选择框中选择的客户数据？

标签： javascriptvue.jslaravel-5vuejs2vue-component

Answer 1

通过过滤数组来观察customer_id和更新：cust_addresscustomers

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