Skip to content

Instantly share code, notes, and snippets.

@fbriou
Last active November 20, 2019 13:35
Show Gist options
  • Save fbriou/6f0533b73670635dd65a1b769c192944 to your computer and use it in GitHub Desktop.
Save fbriou/6f0533b73670635dd65a1b769c192944 to your computer and use it in GitHub Desktop.
<!-- This is a Vue.js single file component. -->
<!-- https://vuejs.org/v2/guide/ -->
<!-- Your HTML -->
<template>
<div class="hello">
<!-- This object will be editable in the Editor -->
<wwObject v-bind:ww-object="section.data.helloWorld"></wwObject>
<!-- This one is as you are used to -->
<div>{{contentFromWeatherAPI}}</div>
</div>
</template>
<!-- Your Javascript ❤️ -->
<script>
export default {
name: "HelloWorld",
data() {
return {
contentFromWeatherAPI: 'Fetching data ...'
}
},
methods: {
// Connect any External API
async fetchWeather() {
try {
const response = await axios.get('https://my-weather-api.com/get');
this.contentFromWeatherAPI = response.data;
}
catch(error) { console.log(error); }
}
},
created(){
this.fetchWeather();
}
};
</script>
<!-- Your CSS -->
<style lang="scss" scoped>
.hello {
padding: 100px 50px;
color: green;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment