This particular element is designed to fetch and display the HTTP status code for various websites using data from a file called data.json. Currently, all sites are shown as "Live" even though the second site does not exist and should ideally display statuses like "404", "503" or "523". The HTTP status code 200 indicates that the site is "Live". The goal here is to show different messages based on each status code received in the response.
ExampleComponent.vue
<template>
<div class="container">
<table class="table table-stripped table-hover" id="cont-table">
<thead>
<tr>
<th>URL</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(site, index) in sites" :key="index">
<td><a v-bind:href="getHref(site)" target="_blank">{{ site.url }}</a></td>
<td v-if="site.status = 200"><span class="label label-success">Live</span>
<td v-else-if="site.status = 404"><span class="label label-success">404</span></td>
<td v-else-if="site.status = 503"><span class="label label-success">503</span></td>
<td v-else-if="site.status = 523"><span class="label label-success">523</span></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
siteDataUrl: "./data.json",
sites: []
}
},
created: function () {
this.loadData();
},
methods: {
getHref: function (site) {
if (!site.port) site.port = 80;
return `https://${site.url}:${site.port}`;
},
loadData: function () {
let self = this
fetch(this.siteDataUrl)
.then(r => r.json())
.then((resp) => {
self.sites = resp
self.getStatus();
});
},
getStatus: function () {
let self = this;
self.sites.forEach(function (site, index) {
let url = `https://${site.url}`;
if (site.port && site.port != 80 && site.port != 443) url += `:${site.port}`;
fetch(url, { mode: 'no-cors'})
.then((resp) => {
site.status = false;
if (resp.status == 200) site.status = 200;
if (resp.status == 404) site.status = 404;
if (resp.status == 503) site.status = 503;
if (resp.status == 523) site.status = 523;
self.$set(self.sites, index, site);
})
})
}
}
}
</script>
data.json
[
{
"name": "",
"url": "www.google.com",
"port": 80
},
{
"name": "",
"url": "www.foo.com",
"port": 443
}
]