Skip to content

Instantly share code, notes, and snippets.

View firminochangani's full-sized avatar

Firmino firminochangani

View GitHub Profile
@firminochangani
firminochangani / http-request.js
Created June 24, 2018 09:18
created() {
// Making the http request with Fetch API
const API = 'https://restcountries.eu/rest/v2/all';
fetch(API, {method: 'GET'})
.then(res => res.json())
.then((json) => {
// Place results into the state property
this.countries = json;
})
@firminochangani
firminochangani / app.html
Last active June 24, 2018 09:04
<body>
<div id="app">
<h1>Vue Search</h1>
<br>
<!-- Search field -->
<input
type="text"
placeholder="Search for a Country"
>
@firminochangani
firminochangani / vue-setup.html
Created June 24, 2018 08:46
<body>
<!-- Importing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
@firminochangani
firminochangani / gist:aebb9c7e6690eade42f05c596810937c
Created June 16, 2018 08:10 — forked from e1024kb/gist:41bf38fdb1a2cb19a781
Country - state list in JSON
{
"countries": [
{
"country": "Afghanistan",
"states": ["Badakhshan", "Badghis", "Baghlan", "Balkh", "Bamian", "Daykondi", "Farah", "Faryab", "Ghazni", "Ghowr", "Helmand", "Herat", "Jowzjan", "Kabul", "Kandahar", "Kapisa", "Khost", "Konar", "Kondoz", "Laghman", "Lowgar", "Nangarhar", "Nimruz", "Nurestan", "Oruzgan", "Paktia", "Paktika", "Panjshir", "Parvan", "Samangan", "Sar-e Pol", "Takhar", "Vardak", "Zabol"]
},
{
"country": "Albania",
"states": ["Berat", "Dibres", "Durres", "Elbasan", "Fier", "Gjirokastre", "Korce", "Kukes", "Lezhe", "Shkoder", "Tirane", "Vlore"]
},
@firminochangani
firminochangani / set-loading-false.js
Created May 27, 2018 12:56
created() {
const API_POSTS = 'https://jsonplaceholder.typicode.com/posts';
fetch(API_POSTS, {method: 'GET'})
.then(res => res.json())
.then(json => {
this.posts = json;
/* Set loading to false after the content
is ready to be displayed */
this.loading = false;
})
@firminochangani
firminochangani / loading.js
Created May 27, 2018 12:45
const vueapp = new Vue({
el: '#vueapp',
data() {
return {
msg: 'Hello World',
posts: [],
loading: true
};
},
// Other part of the code
@firminochangani
firminochangani / loading.html
Created May 27, 2018 12:37
<section id="vueapp">
<article
class="post"
v-for="post in posts"
:key="post.id"
v-if="!loading"
>
<h1 class="title">{{ post.title }}</h1>
<p>{{ post.body }}</p>
</article>
@firminochangani
firminochangani / render-posts.html
Created May 27, 2018 10:53
<section id="vueapp">
<article class="post" v-for="post in posts" :key="post.id">
<h1 class="title">{{ post.title }}</h1>
<p>{{ post.body }}</p>
</article>
</section>
@firminochangani
firminochangani / vueapp.js
Created May 27, 2018 10:42
<script>
const vueapp = new Vue({
el: '#vueapp',
data() {
return {
posts: []
};
},
created() {
const API_POSTS = 'https://jsonplaceholder.typicode.com/posts';
@firminochangani
firminochangani / index.html
Last active May 27, 2018 10:42
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue.js</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>