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

Question

我有以下代码用数据列表项填充搜索框。 datalist项的key设置为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);
            }
        }
    }

Answer 1

无法从选定的 datalist.option 中获取 key，因为 input 事件不会以任何方式 link 到 <option> .

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

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

demo

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

Is it possible to capture the key associated with a datalist item upon selecting an item from the list?

html-datalist

vue.js

vue-component