I have the following code:
export default {
name: '...',
props: ['user'],
data() {
return {
userName: this.user.name
}
},
watch: {
user: (_user) => {
this.userName = _user.name
}
},
methods: {
...
}
};
The userprop is updated by the parent component (it's information from the server). If I log the _user
variable I have everything available. The userName
prop doesn't update though.
Since you are using fat arrow function as below:
user: (_user) => {
this.userName = _user.name
}
The this is not pointing to the vue instance, so by using this.userName
you are not refering to the userName
property in your data.
So use normal function like this:
user: function(_user){
this.userName = _user.name
}
There is a warning mentioned in vuejs docs regarding using an arrow function to define a watcher. You can have a look here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.