start async data in sub-components

is00hcw · Dec 23, 2016 · 2a9519e · 2a9519e
1 parent b96baeb
commit 2a9519e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/examples/async-data/components/Post.vue 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
@@ -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>