Vuejs共通ajaxリクエスト例

2593 ワード

    // --- AJAXデータのパス ---
    sfApp.dataPath = thisHomePath;
    // --- テーマのパス ---

    sfApp.themePath = thisHomePath + 'common/asset/css/theme/';
    // --- データテーブルの  データ ---
    sfApp.dataTableLanguage = {
        sEmptyTable: 'テーブルにデータがありません',
        sInfo: '_START_ - _END_   を   / _TOTAL_   ',
        sInfoEmpty: '0  ',
        sInfoFiltered: '(  _MAX_  )',
        sInfoPostFix: '',
        sInfoThousands: ',',
        sLengthMenu: '     _MENU_  ',
        sLoadingRecords: ' み み ...',
        sProcessing: '   ...',
        sSearch: 'キーワード  ',
        searchPlaceholder: '  するキーワードを  ',
        sZeroRecords: '  する  がありません',
        oPaginate: {
            sFirst: '  へ',
            sLast: '  へ',
            sNext: ' へ',
            sPrevious: ' へ'
        },
        oAria: {
            sSortAscending: ':  を  に べ えるにはアクティブにする',
            sSortDescending: ':  を  に べ えるにはアクティブにする'
        }
    };


    //
    // --- Vue ---
    //

    // --- AJAX ---
    sfApp.vueAjax = Vue.extend({
        data: function() {
            return {
                path: '',
                param: {}, // POSTのパラメーター
                info: {}
            };
        },
        created: function() {
            // --- ロード ---
            this.load();
        },
        updated: function() {
            // ---     にする ---
            $(this.$el)
                .addClass('ready')
                .removeClass('not-ready');
        },
        methods: {
            // --- AJAXデータのロード ---
            load: function() {
                if (this.path) {
                    var self = this;
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: this.path,
                        data: this.param,
                        cache: false
                    }).done(function(data) {
                        self.info = data.data;
                        if (data.result) {
                            self.result = data.result;
                            if (self.result > 0) {
                                if (typeof self.error === 'function') {
                                    self.error(self.result);
                                }
                            }
                        }
                    });
                }
            }
        }
    });