Question

最好首先给出更多背景信息。

我正在使用vuejs，vue-router创建单页应用程序。当用户登录时，从后端返回用户对象。我正在使用Laravel 5.4作为后端。然后，在vue $root实例上对用户对象进行排序，以便可以使用this.$root.user在任何位置访问它。

我唯一的问题是，当我想编辑用户数据时，我有一个编辑表单，其中用户数据应该自动填充现有数据。如果我只是想做这样的事情，那就没问题了：v-model="this.$root.user.first_name"但我有一个表单对象，它有助于验证并使一切更加模块化。

所以在data返回中，我在路由器视图组件上有这个：

data: function() {
        return {
            form: new Form({
                first_name: this.$root.user.first_name,
                last_name: this.$root.user.last_name,
                country: this.$root.user.country,
                preffered_currency: this.$root.user.preffered_currency,
                email: this.$root.user.email,
            })
        }
    }

唯一的问题是一切都是未定义的。我不知道如何解决问题所以任何帮助，这是值得赞赏的。感谢。

Answer 1

我想办法做到这一点。

我忘记添加的内容是，刷新页面时显然会忘记所有当前存储的数据，因此我必须向后端发出请求以获取当前用户。

因此，当获取当前用户的ajax请求时，我创建了一个新的Vue对象，其中所有对象都可以看到并将其分配给Window.Event，并针对该对象创建了一个新的Vue实例。 Window.Event = new Vue({});

现在，一旦ajax请求返回，我做了Window.Event.$emit('user', this.user)，在需要用户数据的组件上，我刚创建了一个$on事件create()。

created() {
        Window.Event.$on('user', function(user){
            this.form.first_name = user.first_name
            this.form.last_name = user.last_name
            this.form.country = user.country
            this.form.preffered_currency = user.preffered_currency
            this.form.email = user.email
        }.bind(this));
    }

使用路由器视图组件vue

1 个答案: