Vuejs: Cannot set property 'profile_picture' of undefined - vue.js

Question

I'm really confused whats wrong with my code. Can someone tell me what I did wrong here.
data() {
return {
users: [],
}
},
methods:{
moveData(response){
for(var x=0;x<response.data.data.length; x++){
this.users[x].profile_picture = response.data.data[x].profile_picture;
this.users[x].age = response.data.data[x].age;
this.users[x].intro = response.data.data[x].introMessage;
this.users[x].name = response.data.data[x].userName;
}
// eslint-disable-next-line
console.log('Users',this.users);
}
}

Answer 1

as the error suggests that this.users[x] is undefined. the simple solution would be to initialize this.users[x] with some empty object just like
for(var x=0;x<response.data.data.length; x++){
this.users[x] = {};
this.users[x].profile_picture = response.data.data[x].profile_picture;
this.users[x].age = response.data.data[x].age;
this.users[x].intro = response.data.data[x].introMessage;
this.users[x].name = response.data.data[x].userName;
}

Answer 2

As you using this.users[x], it always undefined because your array length is 0. So here one way more you can use .map() array to modify the field name and directly assign response to your users in moveData.
By use of Map array with spread operator
const response = [{
profile_picture: 'https://image.flaticon.com/icons/svg/149/149452.svg',
age: 25,
introMessage: 'Hello',
userName: 'test105'
}, {
profile_picture: 'https://image.flaticon.com/icons/svg/149/149452.svg',
age: 18,
introMessage: 'HI',
userName: 'demo105'
}]
console.log(response.map(({age,profile_picture,...r}) => Object.create({
age,
profile_picture,
name: r.userName,
intro: r.introMessage
})));
Modification in your code, use push method of array
const response = {
data: {
data: [{
profile_picture: 'https://image.flaticon.com/icons/svg/149/149452.svg',
age: 25,
introMessage: 'Hello',
userName: 'test105'
}, {
profile_picture: 'https://image.flaticon.com/icons/svg/149/149452.svg',
age: 18,
introMessage: 'HI',
userName: 'demo105'
}]
}
}
let users = [];
for (var x = 0; x < response.data.data.length; x++) {
users.push({
profile_picture: response.data.data[x].profile_picture,
age: response.data.data[x].age,
intro: response.data.data[x].introMessage,
name: response.data.data[x].userName
});
}
console.log(users)