javascript - vue组件内怎样使用vue-paginate插件?

问题描述

问 题

1.问题

我要做一个前端的分页显示，使用vue-paginate插件。我想在.vue组件内使用它的（局部），而不是全局使用，怎样引入这个插件呢？官网的例子是要定义一个vm然后把数据填充到vm的data字段，但是我的组件内部是export default，不知道该怎么做。

按官方readme的意思，要先引入：

import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

然后在vm对象中定义数据，并在模版中使用它：

new Vue({
  el: '#app',
  data: {
    langs: ['PHP', 'JavaScript', 'HTML', 'CSS', 'Ruby', 'Python']
  }
});

<!-- data -->
<ul v-paginate:3="langs">
  <li v-for="lang in langs">
    {{ lang }}
  </li>
</ul>

<!-- links -->
<ul>
  <li v-for="langLink in langsLinks">
    <a @click="changeLangsPage(langLink)" href="#">
      {{ langLink }}
    </a>
  </li>
</ul>

但是，我的.vue组件里用的是export default，没有vm对象，我觉得组件内输出一个vm对象，不知道el写什么，export写什么也不太确定，而且组件内定义一个vue对象感觉很奇怪。

组件的部分代码:

<script>
import Vue from 'vue'
import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)
export default{
  data () {
    return {
      post: ''
    }
  },
  ready () {
    this.$http({
      url: 'http://example.com/query',
      method: 'get'
    }).then((response) => {
      var data = JSON.parse(response.data)
      console.log(response)
      if (data.code === 0) {
        this.post = data.msg
      } else {
        this.post = []
      }
    })
  }
}
</script>

2.已有尝试

把插件放到components里：

export default{
  components: {
    VuePaginate
  },
  data () {
    ...
  },
  ...

这样一来，页面能显示内容了，但是分页无效，控制台有报错提示：

即paginate指令不能被识别，分页失效。

解决方案

问题解决了，修改post在data()中的初值赋值，从''换为[{}]。用[]也会有问题。只能用[{}]

这篇关于javascript - vue组件内怎样使用vue-paginate插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！