Everything works fine with the search filter and pagination on the initial load.
However, upon clicking to go to the next page, an error occurs stating
**'Error in render: "TypeError: this.tickets.filter is not a function"'**This issue can be found in the Tickets.vue file:
<template>
<div class="container--ticket">
<nav>
<ul class="pagination justify-content-end">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item">
<a
class="page-link"
href="#"
@click.prevent="fetchTickets(pagination.prev_page_url)"
>Previous</a>
</li>
<li class="page-item disabled">
<a
class="page-link text-dark"
href="#"
>Page {{ pagination.current_page }} of {{ pagination.last_page }}</a>
</li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item">
<a class="page-link" href="#"
@click.prevent="fetchTickets(pagination.next_page_url)">Next</a>
</li>
</ul>
</nav>
<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Search</span>
</div>
<input type="text" class="form-control" v-model="searchItem">
</div>
<table>
<tbody>
<tr v-for="ticket in filteredTickets" v-bind:key="ticket.auto_id">
<td>{{ ticket.ticket_id }}</td>
<td>{{ ticket.category_name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
The corresponding JavaScript code can be seen below:
export default {
data () {
return {
tickets: [],
ticket: {
auto_id: '',
ticket_id: '',
category_name: '',
sub_category_name: '',
message: '',
filed_date: '',
is_pin: '',
is_starred: '',
severity_name: '',
est_due_date: '',
status_name: '',
filed_by: '',
assigned_to: ''
},
pagination: {},
searchItem: '',
}
},
created () {
this.fetchTickets();
},
computed: {
filteredTickets: function () {
return this.tickets.filter((ticket) => {
return ticket.ticket_id.match(this.searchItem)
|| ticket.category_name.match(this.searchItem)
});
}
},
methods: {
fetchTickets (page_url) {
let vm = this;
page_url = page_url || '/api/tickets';
fetch(page_url)
.then(res => res.json())
.then(res => {
this.tickets = res.data;
vm.makePagination(res);
})
.catch(err => console.log(err));
},
makePagination (res) {
let pagination = {
current_page: res.current_page,
last_page: res.last_page,
next_page_url: res.next_page_url,
prev_page_url: res.prev_page_url
}
this.pagination = pagination;
}
}
}