The request handler receives a data object containing all the information needed to fetch paginated and filtered data. This object is essentially the context object with potential additional properties.
Structure
The request data passed to your requestHandler function includes:
type RequestData = {
endpoint: string
version: string | number
meta: any
search: string
page: number
perPage: number
sortBy: string
sortOrder: 'asc' | 'desc'
filters: object
attrSettings: object
isRefresh: boolean
// ... any additional properties from addContext
}
Properties
API endpoint URL for fetching data.
version
string | number
default:"1"
Version identifier for state management.
Additional metadata passed from the VueList component’s meta prop. Use this for any custom data your API needs.
Current search query string.
Current page number (1-based index).
Number of items requested per page.
sortOrder
'asc' | 'desc'
default:"'desc'"
Sort direction. Either 'asc' for ascending or 'desc' for descending.
Current filter values from v-model:filters binding.
Attribute/column visibility and settings.
true when the request is triggered by calling refresh(), false otherwise.
Example Usage
Here’s a complete example of handling the request data:
import { createApp } from 'vue'
import VueList from '@7span/vue-list'
const app = createApp(App)
app.use(VueList, {
requestHandler: async (requestData) => {
// Construct your API request
const params = new URLSearchParams()
// Pagination
params.append('page', requestData.page)
params.append('per_page', requestData.perPage)
// Search
if (requestData.search) {
params.append('q', requestData.search)
}
// Sorting
if (requestData.sortBy) {
params.append('sort_by', requestData.sortBy)
params.append('sort_order', requestData.sortOrder)
}
// Filters
if (requestData.filters) {
Object.entries(requestData.filters).forEach(([key, value]) => {
if (value !== null && value !== undefined && value !== '') {
params.append(`filter[${key}]`, value)
}
})
}
// Meta data
if (requestData.meta) {
Object.entries(requestData.meta).forEach(([key, value]) => {
params.append(key, value)
})
}
// Make the API request
const response = await fetch(
`${requestData.endpoint}?${params.toString()}`,
{
headers: {
'Content-Type': 'application/json',
// Add authentication headers if needed
}
}
)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const data = await response.json()
// Return the required format
return {
items: data.items, // Array of items
count: data.total // Total count for pagination
}
}
})
Return Value
Your request handler must return a Promise that resolves to an object with:
Array of items to display in the list. Total number of items available (not just the current page). This is used for calculating pagination. Additional Context
You can pass additional context when calling certain methods:
// In your component
const listRef = ref()
// Refresh with additional context
listRef.value.refresh({
isRefresh: true,
forceReload: true
})
requestHandler: async (requestData) => {
if (requestData.forceReload) {
// Handle force reload logic
}
// ...
}
The request handler can be defined globally in the plugin options or overridden per VueList component using the requestHandler prop.