除了自动完成搜索之外，我还想添加功能以允许使用 VueJs 按下/向上键功能
我的模板如下所示：
<div id="app">
<h2>Todos:</h2>
<div class="autocomplete">
<input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrowDown"/>
<ul
v-for="(user, i) in filteredUsers"
:key="i"
class="autocomplete-results"
v-show="isOpen"
:class="{ 'is-active': i === arrowCounter }"
>
<li @click="setResult(user.text)">{{ user.text }}</li>
</ul>
</div>
</div>
在脚本中我有以下内容：
new Vue({
el: "#app",
data: {
users: [
{ id: 1, text: "Learn JavaScript", done: false },
{ id: 2, text: "Learn", done: false },
{ id: 3, text: "Play around in JSFiddle", done: true },
{ id: 4, text: "Build something awesome", done: true }
],
search: '',
arrowCounter: 0 ,
isOpen: false,
filteredUsers: []
},
methods: {
setResult(text) {
this.search = text
},
onArrowDown(event){
if (this.arrowCounter < this.filteredUsers.length) {
this.arrowCounter++
}
},
inputChanged(){
var filtered = this.users.filter((user) => {
return user.text.match(this.search)
});
this.filteredUsers = []
this.isOpen = true
this.filteredUsers.push(...filtered)
console.log(this.filteredUsers)
}
}
})
从用户点击输入字段的那一刻起，我怎样才能允许他使用向下键和向上键从列表中进行选择，并在使用向上/向下键时突出显示我们当前所在的列表？
我的完整小提琴是here https://jsfiddle.net/Wosley_Alarico/n0qgzkbo/123/
