Question

我想在VUE中自动填充文本框中的数据。我有这套数组。

[
  {"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`

如果有人从下拉列表名称中选择“ JOHN DOE”，则他的详细信息应自动填充到阵列列表中的“电子邮件，电话和地址”各个字段。用户可以添加1个以上的人员，并且每个人员数据都应基于“名称”下拉列表进行填充。

Answer 1

使用此功能在数组内部搜索。

function indexWhere(array, conditionFn) {
    const item = array.find(conditionFn)
    return array.indexOf(item)
  }

并在“选择更改事件”上绑定值。

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;

更新了CODE PEN https://codepen.io/hiro-john/pen/jOOwwza?editors=1010

选择更改后将数据从数组检索到文本框

1 个答案: