Currently, I am in the process of developing a full stack application using Vue.js and Fastify.js (a Node framework). The Vue app is supposed to retrieve data from the API I created and display it in the browser console. However, I am encountering an issue where the data is not rendering within the app itself. I even attempted to load it using the mount function, but to no avail.
Below is the complete code I am working with:
const app = new Vue({
el: '#app',
data: {
infos: [{
name: 'Vue',
age: 19,
imageUrl: 's3.aws.amazon.com'
}, {
name: 'Vue 2',
age: 20,
imageUrl: 's3.aws.amazon.com2'
}],
msg: 'Hello Vuejs!'
},
methods:{
getData: () => {
axios.get('http://localhost:3000/getData')
.then((result) => {
this.infos = result.data;
console.log(infos);
})
.catch((err) => {
console.log(err);
});
}
}
})
{{msg}}
Name: {{info.name}}
Age: {{info.age}}
Image: {{info.imageUrl}}
Name: {{info.name}}
Age: {{info.age}}
Image: {{info.imageUrl}}
This image displays what is currently being rendered: The default values are shown, and the array is logged on the right.
For the complete code, please visit: https://github.com/siddiquiehtesham/fullstack-vue-nodejs-api