Skip to content

Commit f3511e0

Browse files
Allow functions to generate defualt values for async computed properties
1 parent 5c6c4f5 commit f3511e0

File tree

4 files changed

+72
-6
lines changed

4 files changed

+72
-6
lines changed

Diff for: CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
33
# Changelog
44

5+
- [v3.0.0](#v300)
56
- [v2.1.1](#v211)
67
- [v2.1.0](#v210)
78
- [v2.0.0](#v200)
@@ -12,6 +13,10 @@
1213

1314
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
1415

16+
### v3.0.0
17+
* Pass the raw error to the error handler when passed the `useRawError` option.
18+
* Allow default values to be given as functions.
19+
1520
### v2.1.1
1621
* Automatic installation when used in a script tag.
1722

Diff for: README.md

+22
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,28 @@ new Vue({
200200
*/
201201
````
202202

203+
You can instead define the default value as a function, in order to depend on
204+
props or on data:
205+
206+
````js
207+
new Vue({
208+
data: {
209+
postId: 1
210+
},
211+
asyncComputed: {
212+
blogPostContent: {
213+
get () {
214+
return Vue.http.get('/post/' + this.postId)
215+
.then(response => response.data.postContent)
216+
},
217+
default () {
218+
return 'Loading post ' + this.postId
219+
}
220+
}
221+
}
222+
}
223+
````
224+
203225
## Options
204226

205227
By default, in case of a rejected promise in an async computed property, vue-async-computed will take care of logging the error for you.

Diff for: src/index.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,14 @@ const AsyncComputed = {
1111
Vue.mixin({
1212
beforeCreate () {
1313
const optionData = this.$options.data
14-
const newData = {}
1514

1615
if (!this.$options.computed) this.$options.computed = {}
1716

1817
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
19-
const fn = this.$options.asyncComputed[key]
20-
const get = typeof fn === 'function' ? fn : fn.get,
21-
def = typeof fn.default === 'undefined' ? null : fn.default
18+
const fn = this.$options.asyncComputed[key],
19+
get = typeof fn === 'function' ? fn : fn.get
2220

2321
this.$options.computed[prefix + key] = get
24-
newData[key] = def
2522
})
2623

2724
this.$options.data = function vueAsyncComputedInjectedDataFn () {
@@ -30,11 +27,24 @@ const AsyncComputed = {
3027
? optionData.call(this)
3128
: optionData
3229
) || {}
33-
Object.keys(newData).forEach(key => { data[key] = newData[key] })
30+
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
31+
data[key] = null
32+
})
3433
return data
3534
}
3635
},
3736
created () {
37+
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
38+
const fn = this.$options.asyncComputed[key],
39+
def = typeof fn.default === 'undefined' ? null : fn.default
40+
41+
if (typeof def === 'function') {
42+
this[key] = def.call(this)
43+
} else {
44+
this[key] = def
45+
}
46+
})
47+
3848
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
3949
let promiseId = 0
4050
this.$watch(prefix + key, newPromise => {

Diff for: test/index.js

+29
Original file line numberDiff line numberDiff line change
@@ -231,3 +231,32 @@ test("Async computed values can have defaults", t => {
231231
t.equal(vm.z, true, 'z resolves to true')
232232
})
233233
})
234+
235+
test("Default values can be functions", t => {
236+
t.plan(4)
237+
const vm = new Vue({
238+
data: {
239+
x: 1
240+
},
241+
asyncComputed: {
242+
y: {
243+
default () { return 2 },
244+
get () {
245+
return Promise.resolve(3)
246+
}
247+
},
248+
z: {
249+
default () { return this.x },
250+
get () {
251+
return Promise.resolve(4)
252+
}
253+
}
254+
}
255+
})
256+
t.equal(vm.y, 2)
257+
t.equal(vm.z, 1)
258+
Vue.nextTick(() => {
259+
t.equal(vm.y, 3)
260+
t.equal(vm.z, 4)
261+
})
262+
})

0 commit comments

Comments
 (0)