javascript - VUE和分页:更改/单击寻呼机后，pag.component的松散值

我正在VUE应用程序中实现一个寻呼机，并且在首次加载时，一切正常。.正确放置了该寻呼机组件所需的参数，并且该寻呼机按原样显示。

问题是..当我导航（使用/单击）传呼机时，所有道具都处于未定义状态，并给我带来了一种危害​​：

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

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



我的想法 ：


将prop值传递给传呼机一定有问题
值被坐起之前，实例化寻呼机？


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>

分页摘要

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-分页后订购

最佳答案

问题肯定在getOrders动作中。没有看到它，我无法查明它是什么，但是基于屏幕截图，我觉得我可以作一个很好的猜测。我假设您每次访问下一页时都使用对api的异步调用，如果不这样做，则容易得多。

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

this.orderList = this.getOrders(queryParams)

您正在将asynch函数分配为该值，该函数可以保证返回诺言。

您需要做的就是将功能分为吸气剂和动作

您调用该操作以从远程服务器获取新数据（假设这就是您所使用的）
作为回调/承诺响应的一部分，您将数据突变到存储中

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

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


通话动作-updateList（queryParams）


在操作中清除商店（store.orders = []）中的orderList
进行api调用
成功后，更新数据

更新视图以显示加载数据动画
数据更新后，反应性将开始，并且orderList将重新填充


使用手表或orderList > 0，删除加载动画