Question

我有以下代码：

export default {
    name: '...',
    props: ['user'],
    data() {
        return {
            userName: this.user.name
        }
    },
    watch: {
        user: (_user) => {
            this.userName = _user.name
        }
    },
    methods: {
        ...
    }
};

userprop由父组件更新（它来自服务器的信息）。如果我记录_user变量，我有一切可用。 userName道具虽然没有更新。

Answer 1

由于您使用胖箭头功能如下：

user: (_user) => {
            this.userName = _user.name
        }

此未指向vue实例，因此使用this.userName您并未引用数据中的userName属性。

所以使用这样的正常函数：

user: function(_user){
            this.userName = _user.name
        }

vuejs docs中提到有关使用箭头功能定义观察者的警告。你可以看看here

vue.js：从观察者更新数据

1 个答案: