如何在 vuejs 中进行分页

Question

嗨，我想在我的视图页面中进行分页。谁能告诉我如何在 vuejs 中做到这一点..

这是我的查看页面：

<div class="container">

<div class="row">
    <el-row :gutter="12">
        <el-col>
      <p>View Candidates</p>
    </el-col>
        </el-row>

    <el-row :gutter="12">
        <template v-for="c in candidates">
            <el-col :span="6">
            <Candidate :c="c" :key="c.id"></Candidate>
            </el-col>
        </template>
    </el-row>
</div>

这是我的 js 页面：

const app = new Vue({
el: '#app',
data() {
    return {
        candidates: window.data.candidates,
    }
},
components: { Candidate }

});

我正在开发 laravel5.4 和 vuejs 2

请任何人都可以帮助我..如何做到这一点..

Answer 1

对于真正的分页，您需要确保您的端点（从您的帖子中，我会说 /candidates 之类的东西）将返回 json 并且它当然会返回一个分页对象。

在 Laravel 中你会这样做

public function index() {
   return Candidates::paginate(10);
}

编辑：有关 laravel 分页的更多信息，您可以查看他们的示例和文档：https://laravel.com/docs/5.4/pagination

一个完整的例子很难给出，但这里真的很短

routes/web.php

Route::get('candidates', 'CandidateController@index');

app/http/controller/CandidateController

public function index() {
    $candidates = App\Candidate::paginate(10);

    return $candidates;
}

对于 laravel 部分的更详细版本，您应该提供您的控制器、迁移、路由设置。

在 Vue 中，我建议您从 Vue 中加载所有数据，而不是使用刀片。即使您可以保持原样 - 它会更加“统一”。

data: function() {
   return { paginator: null }
},
created: function() {
   // load initial first 10 entries
   axios.get('/candidates').then(function(response) {
      this.paginator = response.data;
   }.bind(this));
}

好的，现在您已经拥有了之前的初始负载。您可以遍历 pagniator.data，这是您现在的实际列表。小例子：

<ul v-if="paginator"><!-- important !not loaded on initial render-->
   <li v-for="paginator.data as candidate">{{ candidate.name }}</li>
</ul>

现在加载更多。假设您想要一个按钮。分页器有一个名为 next_page_url 的专业人士，可以为您提供下一个 http 端点。如果它为 null - 现在需要加载数据。

<button v-if="paginator && paginator.next_page_url" @click.prevent="loadMore">Load more</button>

按钮已设置 - 现在加载更多

methods: {
    loadMore: function() {
        // load next 10 elements
        axios.get(this.paginator.next_page_url).then(function(response) {
            // you have two options now. Either replace the paginator fully - then you will actually "page" your results. 
            // only 10 will be visible at any time
            this.paginator = response.data;
        }.bind(this));
    }
}

你去吧，这是一个实际的分页。如果您想 loadMore 将 10 个元素添加到当前列表，这会有点棘手，因为您不想用新加载的内容替换 paginator.data。你想连接它。

...
axios.get(this.paginator.next_page_url).then(function(response) {
  response.data.data = this.paginator.data.concat(response.data.data);
  this.paginator = response.data;
}.bind(this));