PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.67k stars 369 forks source link

[Feature] Specify component state by using a prop instead of a callback #260

Open SirAuron opened 5 years ago

SirAuron commented 5 years ago

Hi @PeachScript !

First of all, thanks for this project! I've toyed with it for some time and it's a really nice component.

On to business. I've seen in this answer you provided here that there is already a programmatic way to invoke methods to reset the component or telling it that some event has been triggered.

My proposal is to also provide a prop on the component itself whose purpose is to provide the same functionalities as those shown in the the linked comment.

For example:

<infinite-loading :state='myState'></infinite-loading>

where myState must be a string whose permitted values are: loaded${loadId}, complete, reset, error.\ The ${loadId} is used to allow multiple consecutive calls to loaded callbacks.

Inside the InfiniteLoading component, there will be a watcher on the prop:

prop: {
  state: {
    default: 'loaded',
    type: String,
  }
},
...
watch: {
  'state': function(newValue) {
    let val = newValue.indexOf('loaded') >= 0 ? 'loaded' : newValue ;
    switch(val) {
      'loaded':
        this.loaded();
        break;
      // other methods
      default:
        throw 'State not recognized!'
        break;
    }
  }
}

Tell me what you think about this proposal and keep up the good work.

middle21 commented 4 years ago

This is exactly what I need.