3
LaravelとVue Jsを使用してデータリストを作成し、vueコンポーネントを使用してデータをページ設定します。コンポーネントを使用せずにコードが正常に機能しますが、リストと同期、LaravelとVue Jsを使用してカスタムページ作成コンポーネントを作成する方法
ここでは私のHTML
<!DOCTYPE html>
<html>
<head>
\t <title>Users List</title>
\t <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>
\t <div class="container" id="users">
\t \t <!-- Item Listing -->
\t \t <table class="table table-bordered">
\t \t \t <tr>
\t \t \t \t <th>Name</th>
\t \t \t \t <th>Email</th>
\t \t \t \t <th>Created At</th>
\t \t \t </tr>
\t \t \t <tr v-for="user in users">
\t \t \t \t <td>@{{ user.name }}</td>
\t \t \t \t <td>@{{ user.email }}</td>
\t \t \t \t <td>@{{ user.created_at }}</td>
\t \t \t </tr>
\t \t </table>
\t \t <vue-pagination></vue-pagination>
\t </div>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
\t <script type="text/javascript" src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>
\t <script type="text/javascript" src="/js/users.js"></script>
</body>
</html>そして、ここでは私のVueのJsコード
ですVUEのコンポーネントを使用した場合VUE JSとこのページネーションの作品を作るためにどのようvar VueComponent = Vue.extend({
template:
'<nav>' +
'<ul class="pagination">' +
'<li v-if="pagination.current_page > 1">' +
'<a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">' +
'<span aria-hidden="true">«</span>' +
'</a>' +
'</li>' +
'<li v-for="page in pagesNumber" :class="{\'active\': page == pagination.current_page}">' +
'<a href="#" @click.prevent="changePage(page)">{{ page }}</a>' +
'</li>' +
'<li v-if="pagination.current_page < pagination.last_page">' +
'<a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">' +
'<span aria-hidden="true">»</span>' +
'</a>' +
'</li>' +
'</ul>' +
'</nav>',
props: ['user'],
data: function() {
return {
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
}
},
computed: {
isActived: function() {
return this.pagination.current_page;
},
pagesNumber: function() {
if (!this.pagination.to) {
return [];
}
var from = this.pagination.current_page - this.offset;
if (from < 1) {
from = 1;
}
var to = from + (this.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
var pagesArray = [];
while (from <= to) {
pagesArray.push(from);
from++;
}
return pagesArray;
}
},
ready : function(){
this.getUsers(this.pagination.current_page);
},
methods : {
getUsers: function(page){
this.$http.get('/user/api?page='+page).then((response) => {
this.$set('pagination', response.data);
});
},
changePage: function (page) {
this.pagination.current_page = page;
this.getUsers(page);
}
}
})
Vue.component('vue-pagination', VueComponent);
new Vue({
el: '#users',
data: {
users: [],
pagination: {
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
},
ready : function(){
\t \t this.getUsers(this.pagination.current_page);
},
methods : {
getUsers: function(page){
this.$http.get('/user/api?page='+page).then((response) => {
this.$set('users', response.data.data);
});
},
}
});私を助けてください。
これは役立ちますhttps://dotdev.co/simple-vue-js-pagination-with-laravel-33b7cfbb5ccc#.n6tyt3s91 –
こちらもご覧くださいhttps://www.npmjs.com/package/vue-laravel-ページ区切り –
ありがとうございます@KhorshedAlam私はそれに取り組んでいます –