From 2a9519e7203004955ffc70f0c8f762e6afeb9816 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Fri, 23 Dec 2016 13:09:14 +0100
Subject: [PATCH] start async data in sub-components

---
 examples/async-data/components/Post.vue | 45 +++++++++++++++++++++++++
 examples/async-data/pages/post.vue      |  6 ++++
 2 files changed, 51 insertions(+)
 create mode 100644 examples/async-data/components/Post.vue

diff --git a/examples/async-data/components/Post.vue b/examples/async-data/components/Post.vue
new file mode 100644
index 0000000000..4403fe1a6e
--- /dev/null
+++ b/examples/async-data/components/Post.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="post">
+    <h1>{{ title }}</h1>
+    <pre>{{ content }}</pre>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'post',
+  props: ['postId'],
+  created () {
+    // if (this.$nuxt.hasComponentData(this)) {
+    //   let data = this.$nuxt.getComponentData(this)
+    //   this.title = data.title
+    //   this.content = data.content
+    //   return
+    // }
+    let promise = axios.get(`https://jsonplaceholder.typicode.com/posts/${this.postId}`)
+    promise.then((res) => {
+      console.log(res.data)
+      this.title = res.data.title
+      this.content = res.data.body
+    })
+    this.$nuxt.addComponentData(this, promise)
+  },
+  data () {
+    return {
+      title: '',
+      content: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post {
+  width: 50%;
+  border: 1px #ddd solid;
+  margin: auto;
+  padding: 30px;
+}
+</style>
diff --git a/examples/async-data/pages/post.vue b/examples/async-data/pages/post.vue
index c7c2457fa9..eca81afc83 100644
--- a/examples/async-data/pages/post.vue
+++ b/examples/async-data/pages/post.vue
@@ -2,12 +2,15 @@
 <template>
   <div>
     <p>{{ post.title }}!</p>
+    <post post-id="1" />
+    <post post-id="2" />
     <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
 
 <script>
 const axios = require('axios')
+import Post from '~components/post'
 
 export default {
   data ({ req }) {
@@ -21,6 +24,9 @@ export default {
     return {
       title: this.post.title
     }
+  },
+  components: {
+    Post
   }
 }
 </script>