Skip to content

Instantly share code, notes, and snippets.

@gopalindians
Created July 22, 2020 13:51
Show Gist options
  • Save gopalindians/444dfab88349724698abc2663e3a5b12 to your computer and use it in GitHub Desktop.
Save gopalindians/444dfab88349724698abc2663e3a5b12 to your computer and use it in GitHub Desktop.
<template>
<div class="container" style="margin-top:50px">
<div :key="weibnar.id" v-for="weibnar in webinars">
<h2 class="mt-5" v-if="loading">{{ weibnar.heading }}</h2>
<div class="row">
<div :key="web.id"
class="col-sm-4 col-md-2 col-lg-2 col-xxl-2 mt-3" v-for="web in weibnar.w_data">
<v-skeleton-loader
:loading="loading"
class="card h-100"
max-width="300"
type="card"
v-show="loading"></v-skeleton-loader>
<div class="card h-100" v-if="!loading">
<img
alt="Card image cap"
class="card-img-top"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17369a5ed01%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17369a5ed01%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2299.4140625%22%20y%3D%2296.2015625%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
/>
<div class="card-body">
<p class="card-text text-danger">
{{ web.start_date }}
</p>
<p class="card-text">{{ web.name }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- {{ webinars }} -->
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
webinars: [{
id: Math.random(),
heading: '',
w_data: [{
id: Math.random(),
start_date: (new Date()),
},
{
id: Math.random(),
start_date: (new Date()),
},
{
id: Math.random(),
start_date: (new Date()),
},
{
id: Math.random(),
start_date: (new Date()),
}]
}],
loading: true
};
},
methods: {
setData(data) {
this.webinars = data.data;
this.loading = false;
}
},
mounted() {
let _this=this;
try {
axios.get("http://localhost:8001/t.php").then(function (response) {
_this.setData(response);
}).catch(function (e) {
console.log(e);
});
} catch (error) {
console.log(error);
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment