Question

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

所以我尝试使用array.filter函数，但是我正在将搜索的creditId值分配给url查询。（“ http://localhost:8080/#/search?creditid=123”）并且我希望查询调用显示信息功能。

这些就是我从REST API中获取数据并在搜索栏中推送该值的贷项查询。

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",
     }
 ]

总结：我想显示个人数据，具体取决于您在搜索输入中键入的信用卡名称。

Answer 1

您应该使用computed property来过滤从安装的挂钩中获取的结果。您可以在此处查看具有类似功能的vue.js文档示例-https://vuejs.org/v2/guide/list.html#v-for-with-a-Component。

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

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

1 个答案: