_vm.paginated不是vue-paginate的函数错误

Question

因此，我尝试使用Vue-Paginate插件，但是，我看到了以下错误。

_vm.paginated is not a function

下面是我的代码：

<template>
  <section :class="open ? 'block': 'hidden'">
    <!-- Start Results -->
    <h1 class="font-thin text-black text-center w-full">Cruise Results</h1>

    <section class="flex flex-wrap">
      <paginate name="cruises" :list="cruises" :per="3">
        <section class="shadow p-4 mb-4 w-full" v-for="cruise in paginated('cruises')" :key="cruise.id">
          <span class="text-md font-bold">{{ cruise.title }}</span>
          <span class="text-sm font-semibold">{{ cruise.summary }}</span>

          <section class="flex">
            <section class="text-lg">
              <span class="text-black">Inside</span>
              <br>
              <span class="text-red">£{{ cruise.inside }}</span>
            </section>
            <span class="pr-8"></span>
            <section class="text-lg">
              <span class="text-black">Balcony</span>
              <br>
              <span class="text-red">£{{ cruise.balcony }}</span>
            </section>
          </section>
        </section>
      </paginate>
    </section>
    <paginate-links for="cruises" :show-step-links="true"></paginate-links>
  </section>
  <!-- Cruise Results -->
</template>

<script>
import firebase from '@/middleware/firebase'
import VuePaginate from 'vue-paginate'

const database = firebase.database()

export default {
  components: {
    VuePaginate
  },
  data: function () {
    return {
      cruises: [],
      paginate: ['cruises']
    }
  },
  mounted () {
    database.ref('cruises').on('child_added', snapshot => this.cruises.push(snapshot.val()))
  }
}
</script>

我已经实现了firebase，并且我相信我已经正确地遵循了文档。

感谢您在这里提供的任何帮助。

Answer 1

您需要添加use，如setup中所述

Vue.use(VuePaginate)

它将添加mixins，例如分页方法。

https://github.com/TahaSh/vue-paginate/blob/master/src/index.js#L16