如何在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

对于真正的分页，你需要确保你的终点（从我的帖子中说出像/候选人这样的东西）将返回json并且它将返回一个pagniated对象的话。

在Laravel你会像

那样做

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

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

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

<强>路由/ web.php

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

应用/ HTTP /控制器/ CandidateController

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

    return $candidates;
}

有关laravel部分的更详细版本，您应该提供Controller，Migration，Routing setup。

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

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端点。如果它为空 - 现在可以加载数据。

<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));