Vue 通过单击按钮的搜索来显示数组元素

Question

我正在学习 Vue Js，我发现自己在这里有点迷茫。我想显示来自 Rest API 的数组元素，具体取决于您搜索的 id。例如：我的 Json 文件包含具有不同 ID 的不同人员，如果我搜索一个特定的 id，我想显示该人的确切信息以及分配给他的 id。

所以我尝试使用 array.filter 函数，但是我将搜索中的 creditId 值分配给 url 查询。("http://localhost:8080/#/search?creditid=123"(我希望查询调用显示信息函数。

所以这些是我从我的 REST API 获取数据并在搜索栏中推送值的 creditid 查询。

export default {
     name: 'app',
     data(){
         return{
             creditid: '',
             credits: [],
             userFilterKey: ''
         }
     },
     mounted() {
         this.$http.get('http://localhost:3000/credits')
         .then(function (res) {
             this.credits = res.body;
         })
         .catch(function (error) {
             console.log('Error: ', error);
         })
     },
     methods: {
         pushing(creditid) {
             this.$router.push({name: 'search', query: {creditid}});
         }
     }
}

这是我的搜索输入和一个搜索按钮：

 <div class="container">
     <input for="search-credit" class="form-control" type="text" placeholder="Credit ID" aria-label="Search" v-model.trim="creditid">
     <router-view/>
     <button type="button" class="btn btn-primary" id="search-credit" @click="pushing(creditid)">Search</button>
 </div>

我的 JSON 文件看起来像这样：

 [
     {
         "creditId": 123,
         "id": 1,
         "client": "Tom",
         "sport": "basketball"
     },
     {
         "creditId": 789,
         "id": 2,
         "client": "Peter",
         "sport": "soccer",
     }
 ]

总结：我想根据您在搜索输入中键入的信用 ID 显示人员的数据。

Answer 1

您应该

使用 computed property 来过滤掉您在挂载钩子中获取的结果。你可以在这里查看具有类似功能的 vue.js 文档示例 - https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component。

如果您想为每个搜索请求进行单独的 API 调用，则只需实现搜索方法并使用您的this.creditid作为参数credits并将数组替换为 API 响应数据 - 示例 https://jsfiddle.net/qrwn568g/1/(添加了用于 http 请求处理的 axios 和用于一点样式的顺风(