Html 如何使用vue.js创建自动完成框？

我是Vue的新手，现在我正在创建简单的搜索应用程序（使用Vue.js cdn）

我想附加建议栏，其中包含来自伪JSON服务器的所有用户id，例如，如果我在搜索栏

1

，我想只附加id为

1

的用户，然后我单击该用户id，我想发送另一个请求，仅接收此用户信息

我被困住了，我怎样才能解决这个问题

var-app=新的Vue({
el:“#应用程序”，
数据：{
消息：“”，
搜索键：“”，
结果：[]
},
方法：{
异步getData（）{
//使用fetch和async/await获取请求
const response=等待获取(`https://jsonplaceholder.typicode.com/users/${this.searchKey}`）；
const data=wait response.json（）
this.result=数据
},
},
创建（）{
这个文件名为getData（）
}
})

标签搜索

建议id

您的方法是正确的，但是，这里有一些关于您的逻辑的问题，对于

json服务器

，您需要使用操作符

\u like

（）来检索或过滤数据，具体取决于列或属性，因此，

getData

方法必须如下：

    async getData() {
      // GET request using fetch with async/await
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users?name_like=${this.searchKey}`
      );
      const data = await response.json();
      this.result = data;
    },

您可以更改属性或列，例如

username\u like

或

id\u like

最后，您需要显示结果，因此，请更改模板：

   <ul class="suggestions" id="suggestions">
     <h1 v-for="item in result" @mousedown="show(item)">
       {{ item.id }} | {{ item.name }}
     </h1>
   </ul>

---

您可以在这里查看它是如何工作的：

令人困惑的问题。写下你想做的事情。

  show(item) {
    alert(JSON.stringify(item, null, 2));
  }