从列表中选择一个项目后，是否可以捕获与数据列表项目关联的键？答案

【问题标题】：Is it possible to capture the key associated with a datalist item upon selecting an item from the list?从列表中选择一个项目后，是否可以捕获与数据列表项目关联的键？
【发布时间】：2022-01-23 20:29:36
【问题描述】：

我有下面的代码来填充数据列表项的搜索框。数据列表项的键设置为 u.userID，显示设置为 u.name。选择一个项目后，我可以获得显示的 u.name。如何获取与项目关联的底层密钥？

<div class="form-group">
    <div class="input-group mb-3">
        <input type="search" id="usersearch" list="userList" class="form-control" placeholder="Search user" 
              @keydown.enter="addUser(selectedUser)" v-model="selectedUser" v-on:input="changingUser($event)" />
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2"> <b-icon icon="search"></b-icon></span>
        </div>
    </div>
    <datalist id="userList">
        <option v-for="u in users" :key="u.userID">{{ u.name }}</option>
    </datalist>
</div>

 methods: {
        addUser(user) {
            console.log(user);
        },
        changingUser(e) {
            if (!e.inputType) {
                this.addUser(this.selectedUser);
            }
        }
    }

【问题讨论】：

标签： vue.js vue-component html-datalist

【解决方案1】：

不可能从选定的datalist.option 中获取key，因为input-事件不会以任何方式链接到<option>。

虽然不理想，但您可以按名称查找用户，然后访问userID：

export default {
  methods: {
    addUser(username) {
      const user = this.users.find(u => u.name === username)
      console.log('addUser ID', { userID: user?.userID })
    },
  }
}

demo

【讨论】：