从Quasar使用无限滚动过滤vue

问题描述

我看到Quasar无限滚动（https://quasar.dev/vue-components/infinite-scroll）是以将“新”对象推入模型为基础的。

但是我已经使用Getter将自身（具有10多个过滤器）设置为过滤器，该过滤器返回数据（请参见代码示例）

我的问题是如何做到最好？

是否可以在不推动无限滚动的情况下实现无限滚动？还是页面很难渲染150-200-250，因为页面全部渲染了。
在将其推入下一个5个数组时，我应该这样做吗？如果是这样，我如何确定它第一次获得20首。接下来是21-40，接下来是41-60 ...等等？

我的代码示例

const store = new Vuex.Store({
  state: {
    items: [
      {"id": "123","category": "AAA"},{"id": "124","category": "BBB"},{"id": "125",{"id": "126","category": "CCC"},{"id": "127","category": "DDD"},{"id": "128","category": "AAA"}
    ]
  },getters: {
    filteredItems: state => currentCategory => {
      if( currentCategory == null ) {
        return state.items;
      }
      return state.items.filter( itm => itm.category == currentCategory );
    }
  }
});

new Vue({
  el: "#app",store,template: `
  <section class="section">
    <h1 class="title">Vuex Getter Filter #2</h1>
    <div class="content">
      <p>This demonstrates how a list of items maintained in Vuex state can be filtered using a getter.  An HTML <code>&lt;select&gt;</code> manipulates a data field "currentCategory" which is bound to the select with a v-model.  The v-model value is used as the parameter to a Vuex getter.</p>
    <p>
For an alternative CodePen in which "currentCategory" is kept as state in Vuex follow <a href="https://codepen.io/walkerca/pen/rNNKpja" target="_blank" >this link</a>.
</p>
    </div>
    <div class="field">
      <label class="label">Filter On</label>
      <div class="control">
        <div class="select">
          <select v-model="currentCategory">
            <option :value="null">Select Category</option>
            <option value="AAA">AAA</option>
            <option value="BBB">BBB</option>
            <option value="CCC">CCC</option>
          </select>
        </div>
      </div>
    </div>
    <table class="table is-fullwidth">
      <thead><tr><th>Id</th><th>Category</th></tr></thead>
      <tbody>
        <tr v-for="itm in $store.getters.filteredItems(currentCategory)" :key="itm.id">
          <td>{{ itm.id }}</td>
          <td>{{ itm.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
`,data: {
    currentCategory: null
  }
});

无限滚动类比
HTML

<div id="q-app">
  <div class="q-pa-md">
    <q-infinite-scroll @load="onLoad" :offset="250">
      <div v-for="(item,index) in items" :key="index" class="caption">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam,ea at omnis vel numquam exercitationem aut,natus minima,porro labore.</p>
      </div>
      <template v-slot:loading>
        <div class="row justify-center q-my-md">
          <q-spinner-dots color="primary" size="40px"></q-spinner-dots>
        </div>
      </template>
    </q-infinite-scroll>
  </div>
</div>

new Vue({
  el: '#q-app',data () {
    return {
      items: [ {},{},{} ]
    }
  },methods: {
    onLoad (index,done) {
      setTimeout(() => {
        if (this.items) {
          this.items.push({},{})
          done()
        }
      },2000)
    }
  }
})

https://codepen.io/pen/?&editable=true&editors=101=https%3A%2F%2Fquasar.dev%2Fvue-components%2Finfinite-scroll

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

quasar-framework vue.js