As I delve into learning Vue Js, I've encountered a bit of confusion. My goal is to showcase array elements from a Rest API based on the specific ID being searched for. For example: within my Json File are various individuals with unique IDs, and when searching for a particular ID, I aim to display that specific person's information corresponding to their assigned ID.
I attempted using the array.filter function, but I am encountering an issue where I need to assign the creditId value from the search to a URL query. (http://localhost:8080/#/search?creditid=123) The desired outcome is for this query to trigger the display info function.
Currently, I am fetching data from my REST API and pushing the creditid query value from the search bar.
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}});
}
}
}
Below is the search input field along with a search button:
<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>
This snippet showcases how my JSON file is structured:
[
{
"auditId": 123,
"id": 1,
"client": "Tom",
"sport": "basketball"
},
{
"auditId": 789,
"id": 2,
"client": "Peter",
"sport": "soccer",
}
]
In conclusion: My objective is to exhibit an individual's data based on the specific credit ID entered in the search input field.