Skip to content

Commit 8d83be4

Browse files
committed
update data-fetching example
1 parent db5e458 commit 8d83be4

File tree

7 files changed

+71
-24
lines changed

7 files changed

+71
-24
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ test/e2e/screenshots
66
selenium-debug.log
77
dist/*.gz
88
dist/*.map
9+
explorations

examples/data-fetching/Post.vue

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<template>
22
<div class="post">
3-
<div v-if="error" style="color: red;">
4-
{{ error }}
5-
</div>
63
<div class="loading" v-if="loading">Loading...</div>
7-
<div v-if="post">
8-
<h2>{{ post.title }}</h2>
9-
<p>{{ post.body }}</p>
4+
<div v-if="error" class="error">
5+
{{ error }}
106
</div>
7+
<transition name="slide">
8+
<!--
9+
giving the post container a unique key triggers transitions
10+
when the post id changes.
11+
-->
12+
<div v-if="post" class="content" :key="post.id">
13+
<h2>{{ post.title }}</h2>
14+
<p>{{ post.body }}</p>
15+
</div>
16+
</transition>
1117
</div>
1218
</template>
1319

1420
<script>
15-
import request from 'superagent'
16-
17-
const API_ROOT = 'http://jsonplaceholder.typicode.com'
21+
import { getPost } from './api'
1822
1923
export default {
2024
data () {
@@ -32,17 +36,16 @@ export default {
3236
},
3337
methods: {
3438
fetchData () {
39+
this.error = this.post = null
3540
this.loading = true
36-
request
37-
.get(`${API_ROOT}/posts/${this.$route.params.id}`)
38-
.end((err, res) => {
39-
this.loading = false
40-
if (err) {
41-
this.error = err.toString()
42-
} else {
43-
this.post = res.body
44-
}
45-
})
41+
getPost(this.$route.params.id, (err, post) => {
42+
this.loading = false
43+
if (err) {
44+
this.error = err.toString()
45+
} else {
46+
this.post = post
47+
}
48+
})
4649
}
4750
}
4851
}
@@ -54,4 +57,19 @@ export default {
5457
top: 10px;
5558
right: 10px;
5659
}
60+
.error {
61+
color: red;
62+
}
63+
.content {
64+
transition: all .35s ease;
65+
position: absolute;
66+
}
67+
.slide-enter {
68+
opacity: 0;
69+
transform: translate(30px, 0);
70+
}
71+
.slide-leave-active {
72+
opacity: 0;
73+
transform: translate(-30px, 0);
74+
}
5775
</style>

examples/data-fetching/api.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const posts = {
2+
'1': {
3+
id: 1,
4+
title: 'sunt aut facere',
5+
body: 'quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto'
6+
},
7+
'2': {
8+
id: 2,
9+
title: 'qui est esse',
10+
body: 'est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla'
11+
}
12+
}
13+
14+
export function getPost (id, cb) {
15+
// fake an API request
16+
setTimeout(() => {
17+
if (posts[id]) {
18+
cb(null, posts[id])
19+
} else {
20+
cb(new Error('Post not found.'))
21+
}
22+
}, 100)
23+
}

examples/data-fetching/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ new Vue({
2424
<li><router-link to="/">/</router-link></li>
2525
<li><router-link to="/post/1">/post/1</router-link></li>
2626
<li><router-link to="/post/2">/post/2</router-link></li>
27+
<li><router-link to="/post/3">/post/3</router-link></li>
2728
</ul>
2829
<router-view class="view"></router-view>
2930
</div>

examples/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ <h1>Vue Router Examples</h1>
1515
<li><a href="active-links">Active Links</a></li>
1616
<li><a href="redirect">Redirect</a></li>
1717
<li><a href="route-alias">Route Alias</a></li>
18-
<li><a href="data-fetching">Data Fetching</a></li>
1918
<li><a href="transitions">Transitions</a></li>
19+
<li><a href="data-fetching">Data Fetching</a></li>
2020
<li><a href="navigation-guards">Navigation Guards</a></li>
2121
<li><a href="scroll-behavior">Scroll Behavior</a></li>
2222
<li><a href="lazy-loading">Lazy Loading</a></li>

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@
5656
"rollup-plugin-replace": "^1.1.1",
5757
"rollup-watch": "^2.4.0",
5858
"selenium-server": "^2.53.1",
59-
"superagent": "^2.1.0",
6059
"uglify-js": "^2.7.0",
6160
"vue": "^2.0.0-beta.3",
6261
"vue-loader": "^9.2.0",

test/e2e/specs/data-fetching.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@ module.exports = {
33
browser
44
.url('http://localhost:8080/data-fetching/')
55
.waitForElementVisible('#app', 1000)
6-
.assert.count('li a', 3)
6+
.assert.count('li a', 4)
77
.assert.containsText('.view', 'home')
88

99
.click('li:nth-child(2) a')
10-
.waitForElementNotPresent('.loading', 3000)
10+
.waitForElementNotPresent('.loading', 500)
1111
.assert.containsText('.post h2', 'sunt aut facere')
1212
.assert.containsText('.post p', 'quia et suscipit')
1313

1414
.click('li:nth-child(3) a')
15-
.waitForElementNotPresent('.loading', 3000)
15+
.waitForElementNotPresent('.loading', 500)
1616
.assert.containsText('.post h2', 'qui est esse')
1717
.assert.containsText('.post p', 'est rerum tempore')
1818

19+
.click('li:nth-child(4) a')
20+
.waitForElementNotPresent('.loading', 500)
21+
.assert.elementNotPresent('.content')
22+
.assert.containsText('.error', 'Post not found')
23+
1924
.click('li:nth-child(1) a')
2025
.assert.elementNotPresent('.post')
2126
.assert.containsText('.view', 'home')

0 commit comments

Comments
 (0)