怎么做vuejs

Question

您好我想做分页我认为page.can人分页告诉我该怎么做，在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

请谁能帮助me..how做到这一点..

Answer 1

对于真正的分页，你需要确保你的端点（从您的文章我会说/类似的东西）会返回json，并且它会返回一个pangiated的课程对象。

在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部分，你应该提供您的控制器，迁移，路由设置的更详细的版本。

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

现在加载更多。假设你想要一个按钮。 paginator有一个名为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));