I am facing an issue with the div tag assigned to the log class. My objective is to populate the text using data retrieved from the API response. However, when I attempt to include the v-for directive, the entire div mysteriously disappears from the browser without any console errors being displayed.
<template>
<div>
<div class="log" v-for="info in infos" v-bind:key="info" v-text="info.login">
Username
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
name: '',
infos: null,
}
},
methods: {
hello() {
let user = document.querySelector(".search").value;
let fullname = user.split(" ").join("");
let msg = "No Username Found";
const axios = require("axios");
axios.get("https://api.github.com/users/" + fullname)
.then(response => (this.infos = response.data))
.catch(error => alert(error + " " + msg))
},
reset() {
this.name = "";
}
}
};
</script>