用于列表而不是表 nuxtjs 切片的引导 vue 分页不是函数答案

【问题标题】：bootstrap vue pagination for list not table nuxtjs slice is not a function用于列表而不是表 nuxtjs 切片的引导 vue 分页不是函数
【发布时间】：2021-07-16 10:44:57
【问题描述】：

我有这样的代码和平。虽然有时间。分页显示不好。并且列表未显示。

这是 html 列表：

<ul>
  <li v-for="(entry, ind) in itemsForList" :key="ind">
    <div class="wallet-module__history-content-icon">
      <i class="far fa-calendar-check"></i>
    </div>
    <div class="wallet-module__history-info mr-8">
      <h5>Date: {{ entry.TranDate }}</h5>
    </div>
    <div class="wallet-module__history-info mr-8">
      <h5>Start Date: {{ entry.StartDate }}</h5>
      <h5>End Date: {{ entry.EndDate }}</h5>
    </div>
    <div class="wallet-module__history-info">
      <h5>No. of Hours: {{ entry.DaysLeave }}</h5>
    </div>
    <div class="wallet-module__history-info ml-5">
      <h5>
        Status: <b-badge :variant="otStatus(entry.status)" class="mb-3">{{ entry.status }} </b-badge>
      </h5>
    </div>
    <div v-if="entry.status == 'Disapproved'" class="wallet-module__history-info">
      <h4>{{ entry.Remarks }}</h4>
    </div>
  </li>
</ul>

这是分页组件：

<b-pagination
  class="wallet-module__pagination"
  v-model="currentPage"
  :total-rows="totalRows"
  :per-page="perPage"
  aria-controls="itemList"
  align="right"
></b-pagination>

这是脚本标签：

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'OvertimeTable',
  components: {},
  data() {
    return {
      api_ret: {
        error: null,
        validation_errors: null,
        application_errors: null,
      },
      options: ['All', 'approved', 'pending', 'disapproved'],
      selected: 'All',
      overtime: {},
      isBusy: false,
      currentPage: 1,
      totalRows: {},
      perPage: 3,
    }
  },
  computed: {
    ...mapGetters({
      api_data: 'loggedInUser',
      emp_details: 'empDetails',
    }),

    itemsForList() {
      return this.overtime.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage)
    },
  },
  mounted() {
    this.getPendingOvertime()
  },
  methods: {
    async getPendingOvertime() {
      this.isBusy = true
      const empcode = this.emp_details.Emp_Cd
      try {
        const res = await this.$axios.get(`/employees/${empcode}/pending-ot`)
        const ret = res.data

        if (ret.code == 200) {
          this.overtime = ret.data
          this.totalRows = this.overtime.length
          console.log('pending-ot', this.overtime)
        } else {
          this.api_ret.error = ret.message
          console.log('no ot', ret)
        }
      } catch (e) {
        console.log(e)
      }
      this.isBusy = false
    },
  },
}
</script>

说“overtime.slice 不是函数”时总是出错。这是我的 js 代码。数据来自后端 api。将其分配给数据超时。任何帮助将不胜感激。当呈现列表组件时，总是说 .slice 不是函数并且没有显示列表

从 api 返回的数据示例：

[
  {
    "TranDate": "2021-04-15 15:20:40",
    "LeaveCd": "SL",
    "Emp_Cd": "F022",
    "DaysLeave": 5,
    "StartDate": "2021-04-27 00:00:00",
    "EndDate": "2021-05-02 00:00:00",
    "Reason": "vb",
    "ApprovedBy": "USER",
    "DateApproved": null,
    "Remarks": null,
    "Void": 0,
    "Paid": 0,
    "Posted": 0,
    "BreakHrs": 0,
    "CreditTo": null,
    "ApplicationNo": "F022-182",
    "NotedBy": null,
    "DateNoted": null,
    "RecommendedBy": null,
    "DateRecommended": null,
    "ShiftCd": "99",
    "EffectivityDate": null,
    "CertifiedBy": null,
    "El": 0,
    "Status": "Pending",
    "TranNo": 298,
    "leave_type": "Sick Leave",
    "status": "Pending",
    "leave_type_ref": {
      "Leave_Cd": "SL",
      "Descr": "Sick Leave",
      "MonthlyCredit": 0.83,
      "MaxCredit": 12,
      "EffectivityMonths": 12,
      "CashLeaveCredit": 0,
      "Creditable": 1,
      "AlwaysPaid": 0
    }
  }
]

【问题讨论】：

这里我们需要更多的调试细节。截至目前，包含实际对象的内容：itemsForList 和所有其他相关对象。另外，请格式化您的代码+突出显示它。 How to Ask
@kissu 更新了问题。根据要求格式化为更具可读性的代码。谢谢
为了保持一致性，对其进行了进一步的编辑。您能否也请提供您获得的数据的实际内容，以查看结构的外观。 PS：ind 应该不用于:key，它实际上是相反的。给它一个真正的 UUID。
已发布示例数据。谢谢@kissu
嗨，我的回答有帮助吗？

标签： list vue.js pagination bootstrap-vue

【解决方案1】：

如果你尝试这个会发生什么？

async created() {
  await this.getPendingOvertime()
},

你还有同样的错误吗？

.slice is not a function 表示左侧的对象 (overtime) 未定义或至少不是 slice 期望的预期数组。在这里，可能是因为您没有等待 API 从后端正确获取数据，因此很早就出现了 computed 错误。

我想这也可以解决

this.overtime?.slice(...) // optional chaining

但这只是一个快速解决方案，我宁愿推荐两者，而不仅仅是这个。

【讨论】：