[英]Vue.js How to Access Elements of an Object
I have an array of objects:我有一个对象数组:
data: function() {
return {
customers:[],
}
},
that populates this select box:填充此 select 框:
<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:选择客户后,我需要从所选 object 中获取客户数据,以便填充其他表单元素,例如:
<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.我在
customers:[ ]
数组中有数据。 How do I get the customer data that was was selected in the select box without an additional trip to the server?如何在不额外访问服务器的情况下获取在 select 框中选择的客户数据?
Watch the customer_id
and update cust_address
by filtering the customers
array:通过过滤
customers
数组来查看customer_id
并更新cust_address
:
data: function() {
return {
customers:[],
}
},
watch:{
customer_id(val){
let found=this.customers.find(cust=>cust.id===val);
this.cust_address=found?found.address:'';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.