mgJsComponentHandler.addDefaultComponent('mg-firewallOption', { template: '#t-mg-firewallOption', props: [ 'component_id', 'component_namespace', 'component_index' ], data: function () { return { data: { entries: {} }, loading_state: false, passwordShow: false, loaded: false, }; }, mounted: function () { var self = this; if(this.$el.offsetParent === null) { setInterval(function(){ if(self.loaded === false && self.$el.offsetParent !== null) { self.loadAjaxData(); self.$parent.$root.$on('reloadMgData', self.updateMgData); clearInterval(this); } }, 500); }else{ self.$nextTick(function () { self.loadAjaxData(); }); self.$parent.$root.$on('reloadMgData', self.updateMgData); } }, methods: { loadAjaxData: function () { this.loaded = true; var self = this; self.loading_state = true; var requestParams = { loadData: self.component_id, namespace: self.component_namespace, index: self.component_index }; var response = mgPageControler.vueLoader.vloadData(requestParams); return response.done(function (data) { self.data = data.data.rawData.data; self.loading_state = false; }).fail(function () { self.loading_state = false; }); }, loadModal: function (event, targetId, namespace, index, params, addSpinner) { mgPageControler.vueLoader.loadModal(event, targetId, typeof namespace !== 'undefined' ? namespace : getItemNamespace(targetId), typeof index !== 'undefined' ? index : getItemIndex(targetId), params, addSpinner); }, updateMgData: function(toReloadId){ if(this.component_id === toReloadId) { this.loadAjaxData(); } } } });