I am facing a challenge with my VueJS application. I am trying to send a request to the server upon loading, which should respond with the "username" of the user and then update it on my website. Everything seems to be working correctly, but when I attempt to assign the returned value, my program stops loading images and an error related to the title appears in the console. I have verified that the value from the server is correct by checking the console. Here is the code snippet for displaying the username:
<span class="iconsNav" style="margin-left: 4px" >{{this.username}}</span>
And here is the script block:
<script>
//components
export default {
methods : {
login(){
//function to login
},
async getUserData(){
var token = 'Token '+ VueCookie.get('access_token')
const response = await axios.get('http://localhost:8000/api/account/data',{
headers:{
'Authorization': token
}
})
console.log(response.data.username)
//when I try to execute this line, an error occurs
this.username = response.data.username
}
},
data(){
return {
username : "User"
}
},
mounted: function(){
this.getUserData()
}
}
</script>