My Coldfusion application is blank, I don't see any errors in console
Please find below is home.cfm, I don't have experience in Vue framework. This application was working earlier however for the past few days I only see balnk screen but there no errors in console. I use Edge browser and Chrome browser. In both the browsers the I see only balnk screen. Please help in this regard. Thanks.
<div id="app" style="display:none">
<!--- start vuetify --->
<v-app> <!-- to use Vuetify components and styles, the page needs to be wrapped in v-app -->
<cfloop array="#components#" index="component">
<!--- each component file contains the vuetify markup --->
<CFINCLUDE template="ui_components/#component#.cfm">
</cfloop>
<v-main v-if="isLoaded">
<v-container >
<div class="text-h5 my-4">My System</div>
<v-card>
<v-card-text class="subtitle-1 font-weight-medium">
<v-row>
<v-col cols="7" class="pr-4">
<div class="title mb-4">Welcome</div>
<div style="line-height: 30px;">
<p>Hello {{firstname}}, welcome to the My site.</p>
<div class="home" v-html="homeHTML"></div>
</div>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-container>
</v-main>
</v-app>
<!--- end vuetify content --->
</div>
<script>
var vm;
document.addEventListener('DOMContentLoaded', function() {
vm = new Vue({
el: "#app",
vuetify: new Vuetify(<CFINCLUDE template="theme.cfm">),
data: function(){
return {
<cfloop array="#components#" index="component">
<!--- create data properties for the global components --->
<CFINCLUDE template="js_components/#component#.cfm">
</cfloop>
activeTab: 0,
hasUnsavedChanges: false,
isLoaded: false,
<CFOUTPUT>
firstname: "#Session.det_pref_nm#",
surname: "#Session.det_surname#",
homeHTML: "",
</CFOUTPUT>
}
},
created: function(){
this.loadAPIData();
},
methods: {
loadAPIData: function(){
var self = this;
axios.get(window.servername + "/api/home/getMyContent_json.cfm?uid="+Math.random(),{withCredentials:true})
.then(function(response){
let HTML = response.data;
HTML = HTML.replace(/<font[^>]+>/g,"").replace("</font>","");
HTML = HTML.replace('cellspacing="1"',"");
self.homeHTML = HTML;
self.isLoaded = true;
})
.catch(function(responses){
console.log("Load Error", responses);
});
},
},
}); // end vue
<!--- Access vue data variables in Chrome Console using vm.$data --->
document.getElementById("app").style.display = "block"; // don't show the content until it has finished rendering
}); // end DOM Content Loaded event
</script>
AdChoices