`TypeError: Cannot read property 'length' of null` in vuejs when data fetch from api

Question

我在bootstrapvue中使用，我有一个API数据来自它，请看下面的代码，我会解释更多：

      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        aria-controls="itemList"
        align="center"
      ></b-pagination>
    export default {
      data() {
        return {
          posts: null,
          perPage: 1,
          currentPage: 1,
        }
      },
  computed: {
    rows() {
      if (this.posts.length >= 1 && this.posts.length !== null) {
        return this.posts.length
      } else {
        return false
      }
    },
    getItemForPagination() {
      return this.posts.slice(
        (this.currentPage - 1) * this.perPage,
        this.currentPage * this.perPage
      )
    },
  },

我想做的一些事情：正如您在上面的代码中看到的，我希望将分页与哪些项目混合在一起，我的意思是显示的项目数量在分页的控制之下。好吧，当我给行计算属性到 :total-rows 它 returns 一个错误，我认为这是因为 API 还没有加载到行上，但是当写在模板上时或像我在计算 rows posts.length', everything works fine, but on :total-rows` 上所做的那样控制这样的错误：

TypeError: Cannot read property 'length' of null

我正在使用 nuxtjs

Answer 1

你应该用一个空数组初始化你的 posts 属性 :

    data() {
    return {
      posts: [],
      perPage: 1,
      currentPage: 1,
    }
  },

然后将长度与 0 进行比较：

 if (this.posts.length >= 1 && this.posts.length !== 0) {

或者只是做：

 if (this.posts.length) {

`TypeError: Cannot read property 'length' of null` in vuejs when data fetch from api

`TypeError: Cannot read property 'length' of null` in vuejs when data fetch from api

vue.js

nuxtjs