时间戳

首页 > 解决方案 > 在用即将到来的数据列表Vuejs和vue-infinite-loading替换之前保留当前数据列表

vue.js - 在用即将到来的数据列表Vuejs和vue-infinite-loading替换之前保留当前数据列表

问题描述

我想在替换另一个即将到来的数据列表之前保留一个数据列表。我在我的 vuejs 项目中使用这个插件：https ://peachscript.github.io/vue-infinite-loading来加载更多数据。

设想：

  1. 通过调用加载更多处理函数重新加载以获取数据列表
    • 在 Vuex 中做一个动作请求并存储在一个状态中
    • 列出来自 Vuex 状态的数据
  2. 过滤另一个数据并列出
    • 保留以前的数据列表，同时另一个即将替换的数据列表

在替换为即将到来的数据列表之前保留当前数据列表

目前，我通过将数据列表重置为 null 来加载更多处理函数来获取数据以获取新数据，这就是我的数据列表为空的原因。

    computed: {
    ...mapGetters({
      lists: ['user/list']
    })
  },
 methods: {
    onLoadMoreLists($state) {
      this.$store.dispatch('user/list').then((data) => { 
          if (data.items.length > 1) {
            this.pages.page++
            $state.loaded()
          } else {
            $state.complete()
          }
        })
    }
}

    // table and infine
    <the-table
          :lists="lists"
        >
          <infinite-loading
            :identifier="infiniteId"
            spinner="spiral"
            @infinite="onLoadMoreLists"
          >
            <div slot="spinner">
              <st-loading></st-loading>
            </div>
            <div slot="no-more">No more data</div>
            <div slot="no-results">No results message</div>
          </infinite-loading>
        </the-table>

标签： vue.jsnuxt.jsnuxtjsvue-infinite-loading

解决方案

我用它来解决问题：

this.$refs.infiniteloading.stateChanger

ref="无限加载"

推荐阅读