Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kamijin-fanta/vue-async-data
Async data loading plugin for Vue.js 2.0
https://github.com/kamijin-fanta/vue-async-data
vue vuejs2
Last synced: about 2 months ago
JSON representation
Async data loading plugin for Vue.js 2.0
- Host: GitHub
- URL: https://github.com/kamijin-fanta/vue-async-data
- Owner: kamijin-fanta
- License: mit
- Archived: true
- Created: 2016-12-19T06:24:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-14T00:28:46.000Z (over 7 years ago)
- Last Synced: 2024-08-09T03:16:52.334Z (3 months ago)
- Topics: vue, vuejs2
- Language: JavaScript
- Size: 13.7 KB
- Stars: 33
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-async-data for Vue.js 2.0
Async data loading plugin for Vue.js
[](https://nodei.co/npm/vue-async-data-2/)
## Install
- this plugin is written in ES2015,
so recommend compile with babel/babel-polyfill.
``` bash
npm install vue-async-data-2
```
``` js
// use as global plugin
import Vue from 'vue';
import { AsyncDataPlugin } from 'vue-async-data-2';
Vue.use(AsyncDataPlugin);
```
``` js
// use as locally mixin
import { AsyncDataMixin } from 'vue-async-data-2';
export default {
mixins: [ AsyncDataMixin ],
}
```
## Usage
``` html
Loading...
Error: {{ userNameError }}
Hello {{ userName }} !
Reload userName
export default {
name: 'show-data',
asyncData: {
userName () {
return new Promise((resolve, reject) => {
setTimeout(_ => {
if (Math.random() > 0.5) {
resolve('risa');
} else {
reject('fetch error...');
}
}, 1000);
})
},
},
}
```
## Standard API
### this.asyncData: object
specify a function that returns `Promise`.
you can also specify a default value.
```js
asyncData: {
userName () { // return promise
return new Promise((resolve) => {
resolve('risa');
})
},
userNameDefault: 'unknown', // default value
userNameLazy: false, // skip run at mount?
},
```
### this.asyncReload([name])
refresh data.
if name arg is specified, only that field is updated.
```js
this.asyncReload('userName')
this.asyncReload()
```
### this.asyncLoading: boolean
global reload flag.
### this.asyncError: boolean
global error flag.
## Auto Generate Property
### this.[name]
if `resolve`, set response.
### this.[name]Error
if throw `reject`, set error message.
### this.[name]Loading: boolean
set to true until there response.