Почему не вызывается метод из другого метода во vue?

Question

[nurdus]

Так работает, но как то не хочется дублировать код...

let data = function() {
    return { user: {}};
};
vm = new Vue({
    el: '#navbar',
    data: data,
    methods: {
        getUserInfo: function() {
            let vm = this;
            $.ajax({
                type: 'GET',
                url: config.apiHost + apiRoutes.getUserInfo,
                dataType: 'json',
            })
            .done(function(res) {
                if (!res.error) {
                    vm.user = res.data;
                }
            });
        },
        loginLocal: function() {
            let vm = this;
            let res = this.sendForm('loginLocal') /*для простоты убрал код функции sendForm*/
            .done(function(res){
                if (!res.error) {
                    vm.user = res.data;
                }
            });
        },
        logout: function(e) {
            let vm = this;
            let res = this.sendForm('logout')
            .done(function(res){
                if (!res.error) {
                    vm.user = res.data; // /*тоже самое, что */ vm.user = {};
                }
            });
        },
    }
});

Так НЕ работает... чтобы значения обновились, нужно обновить страницу вручную

let data = function() {
    return { user: {}};
};
vm = new Vue({
    el: '#navbar',
    data: data,
    methods: {
        getUserInfo: function() {
            let vm = this;
            $.ajax({
                type: 'GET',
                url: config.apiHost + apiRoutes.getUserInfo,
                dataType: 'json',
            })
            .done(function(res) {
                if (!res.error) {
                    vm.user = res.data;
                }
            });
        },
        loginLocal: function() {
            let vm = this;
            let res = this.sendForm('loginLocal') /*для простоты убрал код функции sendForm*/
            .done(function(){ // пробовал просто "getUserInfo() или getUserInfo"
                getUserInfo();
            });
        },
        logout: function(e) {
            let vm = this;
            let res = this.sendForm('logout')
            .done(function(){
                getUserInfo();
            });
        },
    }
});

Заранее большое спасибо.

Comments

[ой всё]

так getUserInfo - это же метод объекта, и вызвать его надо через объект?

Answer 1

[Алексей Шашенков]

vm.$set(vm,'user',res.data)

Почему jq для ajax? fetch, axios - для слабаков?

Comments

[Ilya]

fetch для лохов - jq для пацанов!

пы.cы. на самом деле нет

Answer 2

[Алексей Ярков]

Мда... Начните с того, что почитаете про контекст в JS. Ну и документацию к Vue.
Вот в этой строке

let res = this.sendForm('logout')
.done(function(){
    getUserInfo(); // это не функция, а метод. Почему вы так вызываете?
});

Потом вот это
let vm = this; // зачем эта дичь?
Вы же хотите юзать методы? ну так и юзайте их
Код не проверял, ибо лень. Но идея думаю ясна.

const vm = new Vue({
    el: '#navbar',
    data () {
        return {
            user: {}
        }
    },
    methods: {
        getUserInfo () {
            $.ajax({
                type: 'GET',
                url: config.apiHost + apiRoutes.getUserInfo,
                dataType: 'json'
            })
            .done((res) => {
                if (!res.error) {
                    vm.user = res.data
                }
            })
        },
        loginLocal () {
            this.sendForm('loginLocal')
                .done(() => vm.getUserInfo())
        },
        logout (e) {
            this.sendForm('logout')
                .done(() => vm.getUserInfo())
        }
    }
})

- - -
P.S. Ну и мешать jQuery с Vue, тем паче для AJAX, так себе затея. Возьмите axios хотя бы.