代码拉取完成，页面将自动刷新
Async data loading plugin for Vue.js
NOTE:
Does not work with Vue 2.0.
You don't need this if you are using vue-router. Use vue-router's route.data hook instead.
npm install vue-async-data
// assuming CommonJS
var Vue = require('vue')
var VueAsyncData = require('vue-async-data')
// use globally
// you can also just use `VueAsyncData.mixin` where needed
Vue.use(VueAsyncData)
Then, in your component options, provide an asyncData function:
Vue.component('example', {
data: function {
return {
msg: 'not loaded yet...'
}
},
asyncData: function (resolve, reject) {
// load data and call resolve(data)
// or call reject(reason) if something goes wrong
setTimeout(function () {
// this will call `vm.$set('msg', 'hi')` for you
resolve({
msg: 'hi'
})
}, 1000)
}
})
You can also return a promise that resolves to the data to be set (plays well with vue-resource):
Vue.component('example', {
// ...
asyncData: function () {
var self = this
return someServiceThatReturnsPromise.get(12345)
.then(function (msg) {
// returning this as the Promise's resolve value
// will call `vm.$set('msg', msg)` for you
return {
msg: msg
}
// or, set it yourself:
// self.msg = msg
})
}
})
Parallel fetching with Promise.all and ES6:
Vue.component('example', {
// ...
asyncData() {
return Promise.all([
serviceA.get(123),
serviceB.get(234)
]).then(([a, b]) => ({a, b}))
}
})
The component also gets a method named reloadAsyncData, which obviously reloads the data:
Vue.component('example', {
// ...
asyncData() {
// load data based on `this.params`
},
// reload when params change
watch: {
params: 'reloadAsyncData'
}
})
Your component automatically gets a $loadingAsyncData meta property, which allows you to display a loading state before the data is loaded:
<div v-if="$loadingAsyncData">Loading...</div>
<div v-if="!$loadingAsyncData">Loaded. Put your real content here.</div>
Or, if you prefer to wait until data loaded to display the component, you can use wait-for to listen for the async-data event, which is automatically emitted when the data is loaded:
<example wait-for="async-data"></example>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手