Ошибка в рендере: ..filter не является функцией

Question

Фильтр поиска и страница корректно работают при первой загрузке.

При каждом переходе на следующую страницу появляется ошибка **'Error in render: "TypeError: this.tickets.filter is not a function"'**.

Tickets.vue:

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

---

javascript:

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;
        }
    }
}

Answer 1

Когда вы утверждаете this.tickets = res.data;, this.tickets может не быть массивом.

Предположим, что res.data === undefined или res.data === null, this.tickets.filter не является функцией.

попробуйте это:

if (Array.isArray(this.tickets)) {
  this.tickets.filter(...)
} else {
  // do something
}

Answer 2

в вашем:

data() { 
   return {...

попробуйте изменить

tickets: [],

на:

tickets: { filter: '', }