Skip to content

Instantly share code, notes, and snippets.

@santosh

santosh/vue.html

Created August 2, 2021 07:36
Show Gist options
  • Save santosh/6ca7b094433fe8cd7cdc3a6812a18213 to your computer and use it in GitHub Desktop.
Save santosh/6ca7b094433fe8cd7cdc3a6812a18213 to your computer and use it in GitHub Desktop.
Download ZIP
Props and slots. Slot scopes.
Raw
vue.html
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div class="container">
<a-pod>
<h3 slot="title">#1</h3>
<p slot="caption">Here's today's Astronomy Picture of the Day!</p>
</a-pod>
<a-pod date="2021-08-01">
<h3 slot="title">#2</h3>
<p slot="caption" slot-scope="pic">Here's Picture from {{ pic.date }}!</p>
</a-pod>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component('a-pod', {
template: '<div> \
<slot name="title"></slot> \
<img :src="imgSrc" :title="imgTitle"> \
<slot name="caption" :date="date"></slot> \
',
props: ['date'],
data: function () {
return {
imgSrc: '',
imgTitle: ''
}
},
created: function () {
this.fetchApod();
},
methods: {
fetchApod: function () {
var apiKey = '';
var url = 'https://api.nasa.gov/planetary/apod?api_key=' + apiKey;
if (this.date) {
url += '&date=' + this.date
}
let self = this;
axios.get(url)
.then(function (res) {
self.imgSrc = res.data.url;
self.imgTitle = res.data.title;
});
}
}
})
var vm = new Vue({
el: '#app',
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment