Совместное использование корневых данных с компонентом просмотра маршрутизатора vue js

Лучше сначала дать больше контекста этому.

Я создаю одностраничное приложение с 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,
            })
        }
    }

Единственная проблема в том, что все не определено. Я не уверен, как обойти проблему, поэтому любая помощь будет оценена. Спасибо.


vue-router vuejs2 laravel-5 vue-component
person Jack    schedule 20.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я придумал способ сделать это.

Что я забыл добавить, так это то, что при обновлении страницы vue, очевидно, забывает обо всех текущих сохраненных данных, поэтому из-за этого я должен сделать запрос к серверной части, чтобы получить текущего пользователя.

Поэтому, когда делается запрос 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));
    }
person Jack    schedule 20.03.2017