Retrieve data from Array to text-boxes on select change - vuejs2

Question

I want to auto-populate data in text-boxes for in VUE. I have this set of array.
[
{"ID":"1","Name":"JOHN DOE","Email":"JohnDoe#GMAIL.COM","Phone Number":"58656","Address":"Somewhere"},
{"ID":"2","Name":"JANE ZOE","Email":"JohnDoe#GMAIL.COM","Phone Number":"9969","Address":"Anywhere"},
{"ID":"3","Name":"JENNY JAMES DOE","Email":"JJames#GMAIL.COM","Phone Number":"888888","Address":"Everywhere"}
]
CODE PEN https://codepen.io/hiro-john/pen/jOOwwza?editors=1010`
If anyone select, 'JOHN DOE' from the Dropdown Name , his details should be auto-populate to the respective fields which are 'Email, Phone & Address' from the Array List. User can add more than 1 Person and each Person data should populate base on 'Name' Dropdown.

Answer 1

Used this function to search inside the Array.
function indexWhere(array, conditionFn) {
const item = array.find(conditionFn)
return array.indexOf(item)
}
And bind the value on Select Change Event.
const index = indexWhere(items, item => item.Name === name)
this.shareholders[id].Address = items[index].Address;
this.shareholders[id].Email = items[index].Email;
this.shareholders[id].Phone = items[index].Phone;
Updated CODE PEN https://codepen.io/hiro-john/pen/jOOwwza?editors=1010