javascript - 更改/单击寻呼机后，VUE 和 Pagination : pag. 组件松动值

Question

我正在我的 VUE 应用程序中实现一个寻呼机，第一次加载时，一切正常。寻呼机组件所需的参数正确设置，并且寻呼机按应有的方式显示。

问题是..当我导航(使用/单击)寻呼机时，所有 Prop 都处于未定义状态，并向我展示了一种邪恶:

[Vue warn]: Invalid prop: type check failed for prop "currentPage". Expected Number, got Undefined.

当我在 Chrome 中使用 VUE 调试器时，我注意到:

我的想法:

1. 将 prop 值传递给寻呼机时肯定出现问题
2. 寻呼机在值设置之前实例化？

Home.VUE 组件的片段:

import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'
import Pagination from './Pagination.vue'
import Modal from './Modal.vue'

var moment = require('moment')

export default {
    name: 'Home',
    data() {
        return {
            FiltersVisible: false,
            orderList: {
                currentPage: 1,
                totalPages: this.$store.state.ordersCount / 10,
                // totalPages:5,
                itemsPerPage: 10
            },
            showModal: false,
            searchString: ''
        }
    },
    computed: {
        ...mapGetters(['orders', 'ordersCount']),
        totalPages() {
            return this.ordersCount / 10
        }
        // ...mapGetters(['orders'])
    },

    methods: {
        ...mapActions(['getOrders']),
        init() {
            var queryParams = null;
            this.getOrders(queryParams)
        },
        doSearch: function() {
            var queryParams = {
                searchString: this.searchString
            }
            this.getOrders(queryParams)
        },
        viewOrder: function(order) {
            this.$router.push('/vieworder/' + order._source.orderid)
        },
        viewAppInfo: function(order) {
            this.$router.push('/viewappinfo/' + order._source.mobileinstanceid)
        },
        humanDate: function(dateToFormat) {
            return moment(dateToFormat).format("DD.MM.YYYY [kl: ] hh:mm")
        },
        orderListChanged(pageNum) {
            this.orderList.currentPage = pageNum;
            var queryParams = {
                skip: (pageNum * this.orderList.itemsPerPage) - this.orderList.itemsPerPage,
                take: this.orderList.itemsPerPage
            };
            this.orderList = this.getOrders(queryParams)
        },
        toggleModal: function(actionName, orderItem) {
            var modalParams = {
                modalComponent: actionName,
                selectedOrderItem: orderItem,
                userProfileId: null
            }
            this.$store.dispatch('switchModalComponent', {
                modalParams: modalParams
            })
            this.showModal = true;
        },
    },
    watch: {
        'ordersCount': function(val) {
            if (val) {
                this.orderList.totalPages = val / 10
            }
        },
        route: function() {
            this.init()
            console.log("Orderscount er = " + ordersCount)
            console.log(this)
        }
    },
    created() {
        this.init()
    },
    components: {
        'modal': Modal,
        'Pagination': Pagination
    }
}

<template>
    <div class="col-sm-12">
      .....Order data looped through and presented here....

    <h1>This is page {{ orderList.currentPage }}</h1>

    <pagination :current-page="orderList.currentPage" :total- pages="orderList.totalPages" :items-per-page="orderList.itemsPerPage" @page-changed="orderListChanged">
    </pagination>


    </div>
</template>

分页代码片段.VUE

import Util from './services/Util'

export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: Number,
    itemsPerPage: Number,
    totalItems: Number,
    visiblePages: {
      type: Number,
      default: 5,
      coerce: (val) => parseInt(val)
    }
  },

  methods: {
    activePage(pageNum) {
      return this.currentPage === pageNum ? 'active' : ''
    },
    pageChanged(pageNum) {
      this.$emit('page-changed', pageNum)
    }
  },

  computed: {
    lastPage() {
      if (this.totalPages) {
        return this.totalPages
      } else {
        return this.totalItems % this.itemsPerPage === 0 ?
          this.totalItems / this.itemsPerPage :
          Math.floor(this.totalItems / this.itemsPerPage) + 1
      }
    },
    paginationRange() {
      let start = this.currentPage - this.visiblePages / 2 <= 0 ?
        1 : this.currentPage + this.visiblePages / 2 > this.lastPage ?
        Util.lowerBound(this.lastPage - this.visiblePages + 1, 1) :
        Math.ceil(this.currentPage - this.visiblePages / 2)
      let range = []
      for (let i = 0; i < this.visiblePages && i < this.lastPage; i++) {
        range.push(start + i)
      }
      return range
    }
  }

}

Util.JS

lowerBound (num, limit) {
      return num >= limit ? num : limit
    }

<template>
    <ul class="pagination">
        <li>
            <a href="#" @click.prevent="pageChanged(1)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li v-for="n in paginationRange" :class="activePage(n)">
            <a href="#" @click.prevent="pageChanged(n)">{{ n }}</a>
        </li>
        <li>
            <a href="#" @click.prevent="pageChanged(lastPage)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</template>

更新 05.10 - 分页前排序:

更新了 05.10 - 分页后排序

Answer 1

问题肯定出在 getOrders 操作中。没有看到它，我无法确定它是什么，但根据屏幕截图，我觉得我可以很好地猜测。我假设您每次点击下一页时都会使用对 api 的异步调用，如果没有，那就容易多了。

getOrders 返回一个 promise 。这很可能是因为它是一个使用 axios/fetch 或其他一些库来进行远程调用的异步函数。 vuex 的工作方式是操作是异步的，而突变是同步的。如果你打电话

this.orderList = this.getOrders(queryParams)

您正在将异步函数指定为值，这保证返回一个 promise 。

您需要做的是将功能拆分为 getter 和 actions

您调用该操作以从远程服务器获取新数据(假设这就是您正在使用的) 作为回调/ promise 响应的一部分，您将数据更改为存储

您还提供了一个可以从组件访问的 getter (orderList)，并使用它而不是在组件中定义 orderList

当用户点击上一页/下一页或任何页面时，您...

• 调用操作 - updateList(queryParams)
  • 作为操作的一部分，清除商店中的 orderList (store.orders = [])
  • 进行 API 调用
  • 成功后更新数据
• 更新 View 以显示加载数据动画
• 数据更新后， react 性将启动，orderList 将重新填充
  • 使用 watch 或 orderList > 0，删除加载动画