I just finished coding this Vue component:
<template>
<div>
<h2>Search User By ID</h2>
<input v-model="userId" type="number" placeholder="modify me" />
<br />
<p v-if="userId.length != 0">
The User is: {{ getUser(userId) }}
<!-- returns nothing...-->
<br />
{{ user["id"] }} {{ user["email"] }} {{ user["username"]
}}<!-- returns object-->
</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "FindUser",
data() {
return {
user: null,
userId: ""
};
},
methods: {
getUser(userId) {
axios
.get("http://localhost:4000/api/users/" + this.userId)
.then(response => {
console.log(response);
this.user = response.data.data;
});
}
},
mounted() {
// this.getUser();
}
};
</script>
Although this code is functioning, there are a few issues that I need to address:
- If I enter an ID that doesn't match any user, the previous result is not cleared
- It would be better to have a button for sending the request
- Another concern is that the request seems to be repeating, as evidenced by multiple displays of console logs