0
AJAX呼び出しによるページ番号付けを実行する一般的なVue.JSコンポーネントを作成しようとしています。コンポーネントが使用するデータ（アイテムのリスト）をコンポーネントでカプセル化し、AJAX URLのみをVue.JS Propsを介してコンポーネントに渡したいとします。私はSLOTを使用して、反復部分を含むコンポーネントテンプレートを生成しています。 これは、呼び出し元が項目をループしているため、親（呼び出し元）がバインドされた変数にアクセスする必要があることを意味します。コンポーネントが1つのタイプのリストに固有になり、もう一般的なリストにはならないため、コンポーネントにループ部分を配置します。Vue.jsページングコンポーネント
SLOTが使用されている場合でも、コンポーネントを繰り返し処理するにはどうすればよいですか？または、親がアイテムを繰り返し処理しても、コンポーネントにデータを渡して次のページを取得して更新できる親のデータ。
<script type="text/x-template" id="pagination-component">
<div class="pagination-wrapper">
<slot name="header"></slot>
<slot name="table">default text: Please define the table in parent!</slot>
<div class="well">
<a href="#" @click="getPrevPage">Previous Page</a> |
<a href="#" @click="getNextPage">Next Page</a>
</div>
<slot name="footer"></slot>
</div>
</script>
とコンポーネントを使用して、私のメインページ（親）がある：私のコンポーネントのレイアウトがある
// my component
Vue.component('pagination', {
template: '#pagination-component',
props: {
// the URL for ajax calls is passed from parent to component
source: {
type: String,
required: true
}
},
data: function() {
// access the data being paginated somehow
return data;
},
created:
function() {
console.log("component loaded...");
this.getNextPage();
},
methods:
{
getNextPage: function() {
console.log("getNextPage called...");
// call ajax method and populate the binded data
},
getPrevPage: function() {
console.log("getPrevPage called...");
// call ajax method and populate the binded data
}
}
})
console.log("javascript loaded...");
var app = new Vue({
el: '#wrapper',
data: {
}
})
：
次のコードを参照してください良く説明するために
<div class="table-wrapper" slot="table">
<table class='table'>
<tr>
<th>Username</th>
<th>First name</th>
<th>Last name</th>
<th>E-mail</th>
</tr>
<tr v-for="user in users">
<td>
<a :href="user.id">{{user.username}}</a>
</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
</tr>
</table>
</div>