Question

我正在我的VUE应用程序中实现一个寻呼机，并且在第一次加载时，一切正常..寻呼机组件所需的参数正确，坐标器显示应该...

问题是..当我导航（使用/点击）寻呼机时，所有道具都坐到Undefined并给我一个邪恶：

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

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

我的想法：

将道具值传递给传呼机
Pager在价值观坐之前就被实施了？

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>

Pagination.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返回一个承诺。这很可能是因为它是一个异步函数，使用axios / fetch或其他一些lib进行远程调用。 vuex的工作方式是动作是异步的，并且突变是同步的。如果你打电话

this.orderList = this.getOrders(queryParams)

您要将asynch函数指定为值，保证返回promise。

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

你调用动作从远程服务器获取新数据（假设你正在使用的是什么）作为回调/承诺响应的一部分，您将数据变异到商店

您还可以使用可从组件访问的getter（orderList），并使用该getter而不是在组件中定义orderList

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

调用操作 - updateList（queryParams）
- 清除商店中的orderList（store.orders = []），作为操作的一部分
- 拨打api电话
- 成功，更新数据
更新视图以显示加载数据动画
一旦数据更新，反应将开始，orderList将重新填充
- 使用手表或orderList > 0，删除加载动画

VUE和Pagination：更改/单击寻呼机后pag.component松散值

1 个答案: